修复了对齐的表头问题答案

【问题标题】：Fixed table header issues with align修复了对齐的表头问题
【发布时间】：2015-12-18 21:27:35
【问题描述】：

我正在尝试修复表格标题，并能够滚动表格的内容。

我可以通过研究如何修复 <th> 来做到这一点，但我有一个问题。

使<th> 固定需要至少2 个表。我有 12 列，所以很难将第二张表与第一张表对齐。

第一个表 = 包含 <th> 已修复第二张表=内容

知道如何使两张表对齐吗？有什么方法可以通过只使用一张表来修复<th>？

<table style="width: 100%" cellpadding="0" cellspacing="0" border="1">
<tr>
  <td></td>
  <td>Steps</td>
  <td>Activities</td>
  <td>Details</td>
  <td>Responsibilities</td>
  <td>Mandatory <br> Deliverables </td>
  <td>Custom <br> Build</td>
  <td>Packaged <br> Solution</td>
  <td>Consulting <br> Services</td>
  <td>Infrastructure <br> Projects </td>
  <td>POC</td>
  <td>Maintenance</td>
</tr>
</table>

<div style="overflow: auto;height: 100px; width: 101.3%">
  <table style="width: 100%" cellpadding="0" cellspacing="0" border="1">
  <tr>
    <td>Value 1</td>
    <td>Value 2</td>
     <td>Value 1</td>
    <td>Value 2</td>
     <td>Value 1</td>
    <td>Value 2</td>
     <td>Value 1</td>
    <td>Value 2</td>
     <td>Value 1</td>
    <td>Value 2</td>
     <td>Value 1</td>
    <td>Value 2</td>
  </tr>
  <tr>
    <td>Value 1</td>
    <td>Value 2</td>
     <td>Value 1</td>
    <td>Value 2</td>
     <td>Value 1</td>
    <td>Value 2</td>
     <td>Value 1</td>
    <td>Value 2</td>
     <td>Value 1</td>
    <td>Value 2</td>
     <td>Value 1</td>
    <td>Value 2</td>
  </tr>
  <tr>
    <td>Value 1</td>
    <td>Value 2</td>
     <td>Value 1</td>
    <td>Value 2</td>
     <td>Value 1</td>
    <td>Value 2</td>
     <td>Value 1</td>
    <td>Value 2</td>
     <td>Value 1</td>
    <td>Value 2</td>
     <td>Value 1</td>
    <td>Value 2</td>
  </tr>
  <tr>
    <td>Value 1</td>
    <td>Value 2</td>
     <td>Value 1</td>
    <td>Value 2</td>
     <td>Value 1</td>
    <td>Value 2</td>
     <td>Value 1</td>
    <td>Value 2</td>
     <td>Value 1</td>
    <td>Value 2</td>
     <td>Value 1</td>
    <td>Value 2</td>
  </tr>
  <tr>
    <td>Value 1</td>
    <td>Value 2</td>
     <td>Value 1</td>
    <td>Value 2</td>
     <td>Value 1</td>
    <td>Value 2</td>
     <td>Value 1</td>
    <td>Value 2</td>
     <td>Value 1</td>
    <td>Value 2</td>
     <td>Value 1</td>
    <td>Value 2</td>
  </tr>
  <tr>
    <td>Value 1</td>
    <td>Value 2</td>
     <td>Value 1</td>
    <td>Value 2</td>
     <td>Value 1</td>
    <td>Value 2</td>
     <td>Value 1</td>
    <td>Value 2</td>
     <td>Value 1</td>
    <td>Value 2</td>
     <td>Value 1</td>
    <td>Value 2</td>
  </tr>
  </table>
</div>

【问题讨论】：

HTML table with 100% width, with vertical scroll inside tbody的可能重复

标签： html css html-table alignment

【解决方案1】：

Hashem Qolami 在这个帖子中有一个很好的深入回答：

HTML table with 100% width, with vertical scroll inside tbody

我不建议使用两个表。最好用一张表，把表头放在中间

<thead>
    <tr>
       <th>Steps</th>
       ...
    </tr>
</thead>

以及中间表格的内容

<tbody>...</tbody>

并像 Hashem 展示的那样使用一些 css。

【讨论】：

【解决方案2】：

你可以看到：http://jsfiddle.net/hashem/crspu/555/

你可以很容易地使用下面的代码：

<table style="width: 100%;display:block;">
     <thead style=" display: inline-block;width: 100%;height: 20px;">
          <tr>
  <th>Month</th>
  <th>Savings</th>
</tr>
</thead>


<tbody style="height:200px;display:inline-block;width:100%;overflow:auto;">
<tr>
  <td>January</td>
  <td>$100</td>
</tr>
........


<tr>
  <td>January</td>
  <td>$100</td>
</tr>


</tbody>


<tfoot style="display: inline-block;width: 100%;height: 20px;">
<tr>
  <td>Sum</td>
  <td>$180</td>


 </tr>


</tfoot>
</table>

【讨论】：