Question

在此表上苦苦挣扎，该表有两个在滚动时需要修复的标题。我非常接近满意的结果，尽管在滚动Im时，我希望使标题边框可见，以避免在标题上的行之间显示数据。

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)');
  });

如小提琴所示，我当前的结果：

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

Answer 1

我认为这是您想要的：

   thead {
  background-color: white;
}

Answer 2

将cellpacing 0添加到表格标签，并根据需要调整cellpadding。希望能帮助到你。

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

2 个答案: