Table 固定主题

Question

我正在尝试将 position:fixed 与 table 头部一起使用，但我很难将列保持在固定宽度。

目前，固定位置thead中的第th个单元格并不总是与tbody部分中的td个单元格宽度相同。

.customtable {
   width: 100%;
   font-family: "Times New Roman", Times, serif;
   font-size:0.9em;
   background-color: #fff;
   table-layout:fixed;
   }
   
  .customtable thead{
   display:block;
   position:fixed;
   z-index:100;
   }

  .customtable tbody{
   display:block;
   position:relative;
   margin-top:150px;
   }
   
  .customtable th{
   background-color:#333;
   color:#fff;
   text-align:left;
   padding:7px 10px; 
   }
  .customtable td{
   background-color:#fff;
   text-align:left;
   padding:7px 10px;
   }

  th.rotate {
    height: 140px;
  }
  
  th.rotate > div {
   transform: 
    translate(-10px, 46px)
    rotate(-90deg);
   width: 30px;
  }

  .customtable th:nth-child(1), .customtable td:nth-child(1){width:20px; max-width:20px;}/*#*/
  .customtable th:nth-child(2), .customtable td:nth-child(2){width:50px; max-width:50px;}/*id*/
  .customtable th:nth-child(3), .customtable td:nth-child(3){width:250px; max-width:250px;}/*company*/
  .customtable th:nth-child(4), .customtable td:nth-child(4){width:80px; max-width:80px;}/*forename*/
  .customtable th:nth-child(5), .customtable td:nth-child(5){width:120px; max-width:120px;}/*surname*/
  .customtable th:nth-child(6), .customtable td:nth-child(6){width:200px; max-width:200px;}/*email*/

<table class="customtable">    
    <thead>
        <tr>
          <th class="rotate"><div>#</div></th>
          <th class="rotate"><div>ID</div></th>
          <th class="rotate"><div>COMPANY</div></th>
          <th class="rotate"><div>FORENAME</div></th>
          <th class="rotate"><div>SURNAME</div></th>
        </tr>
    </thead>
    <tbody>
        <tr>
          <td style="color:#666; background:#efefef;">1</td>
          <td style="color:#666; background:#efefef;">56</td>
          <td style="color:#666; background:#efefef;">Bogus Company</td>
          <td style="color:#666; background:#efefef;">David</td>
          <td style="color:#666; background:#efefef;">Rumplestiltskin The Third (Junior)</td>
        </tr>
        <tr>
          <td style="color:#666; background:#efefef;">2</td>
          <td style="color:#666; background:#efefef;">75</td>
          <td style="color:#666; background:#efefef;">Very, Very Long Company Name</td>
          <td style="color:#666; background:#efefef;">Fred</td>
          <td style="color:#666; background:#efefef;">Bloggs</td>
        </tr>
        <tr>
          <td style="color:#666; background:#efefef;">3</td>
          <td style="color:#666; background:#efefef;">120</td>
          <td style="color:#666; background:#efefef;">Bogus Company</td>
          <td style="color:#666; background:#efefef;">Joe</td>
          <td style="color:#666; background:#efefef;">Bloggs</td>
        </tr>
    </tbody>
</table>

任何人都可以建议如何让我的专栏排队。我怀疑这是 width/max 宽度的问题，但我无法解决。我在 Chrome.

Answer 1

问题出在第 th 和 td 的填充

当你不添加填充时，它是对齐的，但它不会使用所有 space

.customtable {
   width: 100%;
   font-family: "Times New Roman", Times, serif;
   font-size:0.9em;
   background-color: #efefef;
   table-layout:fixed;
   }
   
  .customtable thead{
   display:block;
   position:fixed;
   z-index:100;
   }

  .customtable tbody{
   display:block;
   position:absolute;
   margin-top:150px;
   }
   
  .customtable th{
   background-color:#333;
   color:#fff;
   text-align:left; 
   }
  .customtable td{
   background-color:#fff;
   text-align:left;
   }

  th.rotate {
    height: 140px;
  }
  
  th.rotate > div {
   transform: 
    translate(-10px, 46px)
    rotate(-90deg);
   width: 30px;
  }

  .customtable th:nth-child(1), .customtable td:nth-child(1){width:20px; max-width:20px;}/*#*/
  .customtable th:nth-child(2), .customtable td:nth-child(2){width:50px; max-width:50px;}/*id*/
  .customtable th:nth-child(3), .customtable td:nth-child(3){width:250px; max-width:250px;}/*company*/
  .customtable th:nth-child(4), .customtable td:nth-child(4){width:80px; max-width:80px;}/*forename*/
  .customtable th:nth-child(5), .customtable td:nth-child(5){width:120px; max-width:120px;}/*surname*/
  .customtable th:nth-child(6), .customtable td:nth-child(6){width:200px; max-width:200px;}/*email*/

<table class="customtable">    
    <thead>
        <tr>
          <th class="rotate"><div>#</div></th>
          <th class="rotate"><div>ID</div></th>
          <th class="rotate"><div>COMPANY</div></th>
          <th class="rotate"><div>FORENAME</div></th>
          <th class="rotate"><div>SURNAME</div></th>
        </tr>
    </thead>
    <tbody>
        <tr>
          <td style="color:#666; background:#efefef;">1</td>
          <td style="color:#666; background:#efefef;">56</td>
          <td style="color:#666; background:#efefef;">Bogus Company</td>
          <td style="color:#666; background:#efefef;">David</td>
          <td style="color:#666; background:#efefef;">Rumplestiltskin The Third (Junior)</td>
        </tr>
        <tr>
          <td style="color:#666; background:#efefef;">2</td>
          <td style="color:#666; background:#efefef;">75</td>
          <td style="color:#666; background:#efefef;">Very, Very Long Company Name</td>
          <td style="color:#666; background:#efefef;">Fred</td>
          <td style="color:#666; background:#efefef;">Bloggs</td>
        </tr>
        <tr>
          <td style="color:#666; background:#efefef;">3</td>
          <td style="color:#666; background:#efefef;">120</td>
          <td style="color:#666; background:#efefef;">Bogus Company</td>
          <td style="color:#666; background:#efefef;">Joe</td>
          <td style="color:#666; background:#efefef;">Bloggs</td>
        </tr>
    </tbody>
</table>

Table 固定主题

Table with fixed thead

css

html-table

css-position