<style>
  .channelListSection .listRow {
    border: 1px solid black;
    border-radius: 3mm;
    padding: .7mm 3mm;
    margin-top: .6mm;
    font-size: 15px;
    line-height: 4.5mm;
    display: flex;
    flex-direction: row;
    justify-content: stretch;
    align-items: center;
  }

  .channelListSection .listRow.titleRow {
    font-weight: bold;
    font-size: 18px;
    border: none;
  }

  .channelListSection .listRow.highlighted {
    background-color: #DDD;
  }

  .channelListSection .channelCol {
    flex: 0 0 25mm;
  }

  .channelListSection .instrumentCol {
    flex: 3 0 20mm;
  }

  .channelListSection .sourceCol {
    flex: 2 0 20mm;
  }

  .channelListSection .phantomCol {
    flex: 0 0 25mm;
    text-align: center;
  }

  .channelListSection .standCol {
    flex: 0 0 30mm;
    text-align: center;
  }
</style>
<div class="channelListSection">
  <div class="listRow titleRow">
    <p class="channelCol"><%= section.labels.ch %></p>
    <p class="instrumentCol"><%= section.labels.instrument %></p>
    <p class="sourceCol"><%= section.labels.source %></p>
    <p class="phantomCol"><%= section.labels.phantom %></p>
    <p class="standCol"><%= section.labels.stand %></p>
  </div>
  <% section.channels.forEach(channel => { %>
    <div class="<%= channel.highlight ? "listRow highlighted" : "listRow" %>">
      <p class="channelCol"><%= channel.ch %></p>
      <p class="instrumentCol"><%= channel.instrument %></p>
      <p class="sourceCol"><%= channel.source %></p>
      <p class="phantomCol"><%= channel.phantom ? "âœ“" : "" %></p>
      <p class="standCol"><%= channel.stand %></p>
    </div>
  <% }) %>
</div>
