修復了align的表頭問題

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表格的寬度為100％，在tbody中具有垂直滾動

我不建議使用兩個表。 最好使用一個表，將標題放在中間

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

以及表格之間的內容

<tbody>...</tbody>

並像Hashem所示使用一些CSS。

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>