Question

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

我能够通过研究如何修复<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>

Answer 1

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

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

我不建议使用两张桌子。最好使用一个表，将标题放在

之间

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

和表之间的内容

<tbody>...</tbody>

并使用一些CSS，如Hashem所示。

Answer 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>

修复了对齐的表头问题

2 个答案: