如何为具有自定义列宽的可滚动表完成固定标题？答案

【问题标题】：How can be done fixed header for a scrollable table which has custom column width?如何为具有自定义列宽的可滚动表完成固定标题？
【发布时间】：2019-08-13 08:43:55
【问题描述】：

我尝试修复具有自定义列宽的可滚动表格的标题。

当我将 tbody 转为块标签时，标题列和正文列不匹配。

你可以从这支笔看到例子

https://codepen.io/engtuncay/pen/Oqayod

Html部分有一个div，在这个div里面有一个表格，我在col标签里定义了列大小。

    .tableDiv{
      height:150px;
      overflow-y:scroll;
      padding:10px;
    }
    
    .fixed_header{
       width: 100%;
       table-layout: fixed;
    }

    <div class="tableDiv">
    <table class="fixed_header">
      <thead>
        <colgroup>
          <col style="width:70px">
          <col style="width:150px">
          <col>
          <col>
          <col>
        </colgroup>
        <tr>
          <th>Col 1</th>
          <th>Col 2</th>
          <th>Col 3</th>
          <th>Col 4</th>
          <th>Col 5</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>row 1-0</td>
          <td>row 1-1</td>
          <td>row 1-2</td>
          <td>row 1-3</td>
          <td>row 1-4</td>
        </tr>
        <tr>
          <td>row 2-0</td>
          <td>row 2-1</td>
          <td>row 2-2</td>
          <td>row 2-3</td>
          <td>row 2-4</td>
        </tr>
        <tr>
          <td>row 3-0</td>
          <td>row 3-1</td>
          <td>row 3-2</td>
          <td>row 3-3</td>
          <td>row 3-4</td>
        </tr>
        <tr>
          <td>row 4-0</td>
          <td>row 4-1</td>
          <td>row 4-2</td>
          <td>row 4-3</td>
          <td>row 4-4</td>
        </tr>
        <tr>
          <td>row 5-0</td>
          <td>row 5-1</td>
          <td>row 5-2</td>
          <td>row 5-3</td>
          <td>row 5-4</td>
        </tr>
        <tr>
          <td>row 6-0</td>
          <td>row 6-1</td>
          <td>row 6-2</td>
          <td>row 6-3</td>
          <td>row 6-4</td>
        </tr>
        <tr>
          <td>row 7-0</td>
          <td>row 7-1</td>
          <td>row 7-2</td>
          <td>row 7-3</td>
          <td>row 7-4</td>
        </tr>
     
      </tbody>
      </table>
    </div>

谢谢

【问题讨论】：

stackoverflow.com/questions/47723996/… 这里解释并有工作版本
这个问题已经回答了一个老问题。 enter link description here
我的问题与自定义列宽不同，例如，前两列具有自定义宽度，我在 col 标签中定义了它们的宽度。
我为您在 stackoverflow 帖子中发送的解决方案定义了列宽，但它不起作用。你可以从codepen.io/engtuncay/pen/NJeRXq看到

标签： css html

【解决方案1】：

您可以将标题的位置设置为固定。我正在编写一个示例布局。

<div style="display:flex;justify-content:space-between;">
 <div style="display:inline-block;"><!-- this will contain single column-->
<div style="position:fixed;top:0px;left:0px;">
Col1
</div>

【讨论】：

@engtuncay 你的代码的问题是你的布局。您应该首先将每一列分组为单个实体，然后您可以在 flexbox 中显示所有这些列，并将内容对齐为空格，然后您可以修复标题
感谢您的回答。您的意思是使用 flex 而不是 table 标签生成带有 div 标签的表格？
@engtuncay 我的意思是基本上你正在为第一行制作单独的元素，你希望它是固定的，但是像布局表列一样。