提供宽度后，可滚动的tbody td宽度不占空间

Question

我有一个带有固定标题的可滚动tbody。即使在td中提供宽度后，列也未正确对齐。我不需要添加额外的div来实现相同的目标。

table.tables {
  width:590px;
  position: relative;
  height: 200px;
}
table.tables thead {
  display: table;
}
table.tables tbody {
  display: block;
}
table.tables thead {
  position: relative;
  width: 100%;
  background: aqua;
}
.tables tbody {
  height: 200px;      
  overflow-y: auto; 
  overflow-x: hidden;
}
table.tables tbody tr {
  display:table;
  table-layout: fixed;
  width: 100%;
}
table.tables thead tr {
  display:table;
  table-layout: fixed;
  width: 100%;
}

<div class="wrap"> 
  <table class="tables"> 
    <thead> 
      <tr>
        <th width="40%">Header1</th>
        <th width="40%">Header2</th>
        <th width="20%">Header3</th>
      </tr> 
    </thead>
    <tbody>
      <tr>
        <td width="40%">Value1</td>
        <td width="40%">Value2</td>
        <td width="20%">Value3</td>
      </tr>
      <tr>
        <td>Value1</td>
        <td>Value2</td>
        <td>Value2</td>
      </tr>
      <tr>
        <td>Value1</td>
        <td>Value2</td>
        <td>Value2</td>
      </tr>
      <tr>
        <td>Value1</td>
        <td>Value2</td>
        <td>Value2</td>
      </tr>
      <tr>
        <td>Value1</td>
        <td>Value2</td>
        <td>Value2</td>
      </tr>
      <tr>
        <td>Value1</td>
        <td>Value2</td>
        <td>Value2</td>
      </tr>
      <tr>
        <td>Value1</td>
        <td>Value2</td>
        <td>Value2</td>
      </tr>
      <tr>
        <td>Value1</td>
        <td>Value2</td>
        <td>Value2</td>
      </tr>
      <tr>
        <td>Value1</td>
        <td>Value2</td>
        <td>Value2</td>
      </tr>
      <tr>
        <td>Value1</td>
        <td>Value2</td>
        <td>Value2</td>
      </tr>
      <tr>
        <td>Value1</td>
        <td>Value2</td>
        <td>Value2</td>
      </tr>
      <tr>
        <td>Value1</td>
        <td>Value2</td>
        <td>Value2</td>
      </tr>
      <tr>
        <td>Value1</td>
        <td>Value2</td>
        <td>Value2</td>
      </tr>
      <tr>
        <td>Value1</td>
        <td>Value2</td>
        <td>Value2</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

你可以这样做：

table.tables {
  width: 590px;
  position: relative;
  height: 200px;
}

table.tables > thead{display: table;}
table.tables > tbody{display: block;}

table.tables > thead {
  position: relative;
  width: calc(100% - 17px); /* 17px scroll-bar width */
  background: aqua;
}

table.tables > thead > tr > th {
  text-align: left; /* the default value for 'th' is center */
}

.tables tbody {
  height: 200px;      
  overflow-y: auto; 
  overflow-x: hidden;
}

table.tables > tbody > tr {
  display: table;
  table-layout: fixed;
  width: 100%;
}

table.tables > thead > tr > th:first-child {width: 40%}
table.tables > thead > tr > th:nth-child(2) {width: 40%}
table.tables > thead > tr > th:nth-child(3) {width: 20%} /* can also use :last-child */

table.tables > tbody > tr > td:first-child {width: 40%}
table.tables > tbody > tr > td:nth-child(2) {width: 40%}
table.tables > tbody > tr > td:nth-child(3) {width: 20%} /* can also use :last-child */

table.tables > thead > tr {
  display: table;
  table-layout: fixed;
  width: 100%;
}

/* Still here just in case you make up your mind.
tbody > tr > td {
  text-align: center;
}
*/

<div class="wrap"> 
  <table class="tables"> 
    <thead> 
      <tr>
        <th>Header1</th>
        <th>Header2</th>
        <th>Header3</th>
      </tr> 
    </thead>
    
    <tbody>
      <tr>
        <td>Value1</td>
        <td>Value2</td>
        <td>Value3</td>
      </tr>

      <tr>
      <td>Value1</td>
      <td>Value2</td>
      <td>Value2</td>
      </tr>

      <tr>
      <td>Value1</td>
      <td>Value2</td>
      <td>Value2</td>

      </tr><tr>
      <td>Value1</td>
      <td>Value2</td>
      <td>Value2</td>

      </tr><tr>
      <td>Value1</td>
      <td>Value2</td>
      <td>Value2</td>

      </tr><tr>
      <td>Value1</td>
      <td>Value2</td>
      <td>Value2</td>

      </tr><tr>
      <td>Value1</td>
      <td>Value2</td>
      <td>Value2</td>

      </tr><tr>
      <td>Value1</td>
      <td>Value2</td>
      <td>Value2</td>

      </tr><tr>
      <td>Value1</td>
      <td>Value2</td>
      <td>Value2</td>

      </tr><tr>
      <td>Value1</td>
      <td>Value2</td>
      <td>Value2</td>

      </tr><tr>
      <td>Value1</td>
      <td>Value2</td>
      <td>Value2</td>

      </tr><tr>
      <td>Value1</td>
      <td>Value2</td>
      <td>Value2</td>

      </tr><tr>
      <td>Value1</td>
      <td>Value2</td>
      <td>Value2</td>

      </tr><tr>
      <td>Value1</td>
      <td>Value2</td>
      <td>Value2</td>

      </tr>
    </tbody>
  </table>
</div>

默认情况下，td左对齐文字，th将其对齐居中。要垂直对齐，您需要从100％中扣除滚动条的17px宽度，并将th左对齐。