表格滚动上的两个固定标题 - 添加边框

Question

Been struggling with this table that has two headers that need to be fixed on scrolling. Im pretty close to a satisfactory result, although, when Im scrolling, I wanted to have the headers borders visible, to avoid displaying the data between the lines on the headers.

HTML

<div class="table-fix-head">
  <table class="table cogs cogs_feature" id="multi-header-table">
    <thead>
      <tr class="titles">
        <th colspan="4" class="title-cogs">JobItems COGS </th>
        <th colspan="4" class="subtitle">COGS - Estimated Time</th>
        <th colspan="4" class="subtitle">COGS - Actual Cost</th>
        <th colspan="1" class="title-cogs"></th>
      </tr>
      <tr>
        <th> Client/Project </th>
        <th> Job
        </th>
        <th> Job Items
        </th>
        <th> Status </th>
        <th class="cogs-vertical-line"> Lead</th>
        <th> Interview</th>
        <th> Writer</th>
        <th> Edit</th>
        <th> Lead</th>
        <th> Interview</th>
        <th> Writer</th>
        <th> Edit</th>
        <th> Weekly Budget </th>
      </tr>
    </thead>
    <tbody>
        <tr>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
                    <td>test</td>
          <td>test</td>
                    <td>test</td>
          <td>test</td>
        </tr>
                <tr>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
                    <td>test</td>
          <td>test</td>
                    <td>test</td>
          <td>test</td>
        </tr>
                <tr>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
                    <td>test</td>
          <td>test</td>
                    <td>test</td>
          <td>test</td>
        </tr>
                <tr>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
                    <td>test</td>
          <td>test</td>
                    <td>test</td>
          <td>test</td>
        </tr>
                <tr>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
                    <td>test</td>
          <td>test</td>
                    <td>test</td>
          <td>test</td>
        </tr>
                <tr>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
                    <td>test</td>
          <td>test</td>
                    <td>test</td>
          <td>test</td>
        </tr>
                <tr>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
                    <td>test</td>
          <td>test</td>
                    <td>test</td>
          <td>test</td>
        </tr>
                <tr>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
                    <td>test</td>
          <td>test</td>
                    <td>test</td>
          <td>test</td>
        </tr>
                <tr>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
                    <td>test</td>
          <td>test</td>
                    <td>test</td>
          <td>test</td>
        </tr>
                <tr>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
                    <td>test</td>
          <td>test</td>
                    <td>test</td>
          <td>test</td>
        </tr>
                <tr>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
                    <td>test</td>
          <td>test</td>
                    <td>test</td>
          <td>test</td>
        </tr>
                <tr>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
                    <td>test</td>
          <td>test</td>
                    <td>test</td>
          <td>test</td>
        </tr>
                <tr>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
                    <td>test</td>
          <td>test</td>
                    <td>test</td>
          <td>test</td>
        </tr>
                <tr>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
                    <td>test</td>
          <td>test</td>
                    <td>test</td>
          <td>test</td>
        </tr>
                <tr>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
                    <td>test</td>
          <td>test</td>
                    <td>test</td>
          <td>test</td>
        </tr>
    </tbody>
  </table>
</div>

CSS

.table-fix-head { 
  overflow-y: scroll; height: 290px; 
}

table #multi-header-table {
  display: table;
  border-collapse: collapse;
  width: 100%;
}

#multi-header-table th {
  padding-top: 12px;
  padding-bottom: 12px;
  background-color: #0c6ac1;
  color: white;
  border: 2px solid black;
 }

JS

  var $th = $('.table-fix-head').find('thead th')
  $('.table-fix-head').on('scroll', function() {
    $th.css('transform', 'translateY('+ this.scrollTop +'px)');
  });

as shown on the fiddle, my current result:

https://jsfiddle.net/x7zatqL1/1/

Answer 1

I think this is what you're looking for:

   thead {
  background-color: white;
}

Answer 2

Add cellspacing 0 to the table tag and adjust the cellpadding as necessary. Hope it helps.