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

【问题标题】：Two fixed headers on table scroll - add border表格滚动上的两个固定标题 - 添加边框
【发布时间】：2020-03-27 15:24:31
【问题描述】：

一直在努力处理这个有两个标题需要在滚动时修复的表格。我非常接近令人满意的结果，虽然，当我滚动时，我希望标题边框可见，以避免在标题上的行之间显示数据。

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

  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/

【问题讨论】：

您可以添加足够厚的白色阴影或轮廓以覆盖间隙。 jsfiddle.net/o0zemnsk/1border-spacing 立即应用于整个表格；
非常感谢@G-Cyr，希望我能选择你的答案，你用一行 CSS 就可以了！

标签： javascript jquery html css frontend

【解决方案1】：

将单元格间距 0 添加到表格标记并根据需要调整单元格填充。希望能帮助到你。

【讨论】：

我的意思是直接作为答案的一部分而不是链接。

【解决方案2】：

我想这就是你要找的东西：

   thead {
  background-color: white;
}

【讨论】：