html - table 固定，可滚动的 table ； thead列适合tbody列

This question already has answers here:

How to set tbody height with overflow scroll
                                
                                    （11个答案）
                                
                        
                                2年前关闭。
            
                    
我需要用固定的thead和可滚动的tbody创建一个表。我还需要thead列以适合tbody列。

例如我有这样的表：

<table>
  <thead>
    <tr>
      <th>
        aaa
      </th>
      <th>
        aaabbb
      </th>
      <th>
        aaabbbccc
      </th>
      <th>
        aaabbbcccddd
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        asdf
      </td>
      <td>
        asdfaaabbb
      </td>
      <td>
        asdfaaa
      </td>
      <td>
        asd
      </td>
    </tr>
  </tbody>
</table>

您有什么想法可以将thead列适合于tbody列吗？

最佳答案

您可以为position: fixed设置thead：

* {
  box-sizing: border-box
}

html,
body {
  padding: 0;
  margin: 0
}

th {
  border: 1px solid red
}

td {
  border: 1px solid green
}

table {
  position: relative;
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  margin-top: 21px
}

thead {
  position: fixed;
  display: table;
  table-layout: fixed;
  border-collapse: collapse;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: #fff;
}

<table>
  <thead>
    <tr>
      <th>
        aaa
      </th>
      <th>
        aaabbb
      </th>
      <th>
        aaabbbccc
      </th>
      <th>
        aaabbbcccddd
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        asdf
      </td>
      <td>
        asdfaaabbb
      </td>
      <td>
        asdfaaa
      </td>
      <td>
        asd
      </td>
    </tr>
    <tr>
      <td>
        asdf
      </td>
      <td>
        asdfaaabbb
      </td>
      <td>
        asdfaaa
      </td>
      <td>
        asd
      </td>
    </tr>
    <tr>
      <td>
        asdf
      </td>
      <td>
        asdfaaabbb
      </td>
      <td>
        asdfaaa
      </td>
      <td>
        asd
      </td>
    </tr>
    <tr>
      <td>
        asdf
      </td>
      <td>
        asdfaaabbb
      </td>
      <td>
        asdfaaa
      </td>
      <td>
        asd
      </td>
    </tr>
    <tr>
      <td>
        asdf
      </td>
      <td>
        asdfaaabbb
      </td>
      <td>
        asdfaaa
      </td>
      <td>
        asd
      </td>
    </tr>
    <tr>
      <td>
        asdf
      </td>
      <td>
        asdfaaabbb
      </td>
      <td>
        asdfaaa
      </td>
      <td>
        asd
      </td>
    </tr>
    <tr>
      <td>
        asdf
      </td>
      <td>
        asdfaaabbb
      </td>
      <td>
        asdfaaa
      </td>
      <td>
        asd
      </td>
    </tr>
    <tr>
      <td>
        asdf
      </td>
      <td>
        asdfaaabbb
      </td>
      <td>
        asdfaaa
      </td>
      <td>
        asd
      </td>
    </tr>
    <tr>
      <td>
        asdf
      </td>
      <td>
        asdfaaabbb
      </td>
      <td>
        asdfaaa
      </td>
      <td>
        asd
      </td>
    </tr>
    <tr>
      <td>
        asdf
      </td>
      <td>
        asdfaaabbb
      </td>
      <td>
        asdfaaa
      </td>
      <td>
        asd
      </td>
    </tr>
    <tr>
      <td>
        asdf
      </td>
      <td>
        asdfaaabbb
      </td>
      <td>
        asdfaaa
      </td>
      <td>
        asd
      </td>
    </tr>
    <tr>
      <td>
        asdf
      </td>
      <td>
        asdfaaabbb
      </td>
      <td>
        asdfaaa
      </td>
      <td>
        asd
      </td>
    </tr>
    <tr>
      <td>
        asdf
      </td>
      <td>
        asdfaaabbb
      </td>
      <td>
        asdfaaa
      </td>
      <td>
        asd
      </td>
    </tr>
    <tr>
      <td>
        asdf
      </td>
      <td>
        asdfaaabbb
      </td>
      <td>
        asdfaaa
      </td>
      <td>
        asd
      </td>
    </tr>
    <tr>
      <td>
        asdf
      </td>
      <td>
        asdfaaabbb
      </td>
      <td>
        asdfaaa
      </td>
      <td>
        asd
      </td>
    </tr>
    <tr>
      <td>
        asdf
      </td>
      <td>
        asdfaaabbb
      </td>
      <td>
        asdfaaa
      </td>
      <td>
        asd
      </td>
    </tr>
    <tr>
      <td>
        asdf
      </td>
      <td>
        asdfaaabbb
      </td>
      <td>
        asdfaaa
      </td>
      <td>
        asd
      </td>
    </tr>
    <tr>
      <td>
        asdf
      </td>
      <td>
        asdfaaabbb
      </td>
      <td>
        asdfaaa
      </td>
      <td>
        asd
      </td>
    </tr>
  </tbody>
</table>

关于html - table 固定，可滚动的 table ； thead列适合tbody列，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46685897/