html - 表格正文部分的滚动属性不起作用

Question

我有一个表，其中标题应固定在它们的位置和滚动内容。

我找到了滚动它们的方法，方法是首先使用单独的表格进行标题，然后使用第二个表格进行正文部分，该表格位于 div 中，该表格具有滚动属性。

但是当列数越来越多时，第一个表中的标题与第二个表中的内容对齐变得越来越困难。

这就是为什么我被迫在 tbody 中创建一个卷轴。但它不起作用。我试图为 tbody 部分提供滚动属性并固定其高度，但它没有滚动。

我要纠正的代码是，

<table width="900" border="1" cellspacing="0" cellpadding="0">
<thead>
  <tr>
    <th scope="col">h1</th>
    <th scope="col">h2</th>
    <th scope="col">h3</th>
    <th scope="col">h4</th>
    <th scope="col">h5</th>
    <th scope="col">h6</th>
  </tr>
  </thead>

   <tbody style="height:5px; overflow:scroll;">
  <tr>
    <td height="10">1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td height="10">7</td>
    <td>8</td>
    <td>9</td>
    <td>0</td>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td height="10">3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
  </tr>
  <tr>
    <td height="10">9</td>
    <td>0</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  </tbody>
</table>

使用 2 个表创建固定 header 的代码是

<table width="900" border="1" cellspacing="0" cellpadding="0">
<thead>
  <tr>
    <th scope="col">h1</th>
    <th scope="col">h2</th>
    <th scope="col">h3</th>
    <th scope="col">h4</th>
    <th scope="col">h5</th>
    <th scope="col">h6</th>
  </tr>
  </thead>
  </table>
 <div  style="height:50px; overflow-y:scroll; width:920px;">
<table width="900" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td height="10">1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td height="10">7</td>
    <td>8</td>
    <td>9</td>
    <td>0</td>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td height="10">3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
  </tr>
  <tr>
    <td height="10">9</td>
    <td>0</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
</table>

Answer 1

试试看

<table width="900" border="1" cellspacing="0" cellpadding="0">
 <thead>
  <tr>
    <th scope="col">h1</th>
    <th scope="col">h2</th>
    <th scope="col">h3</th>
    <th scope="col">h4</th>
    <th scope="col">h5</th>
    <th scope="col">h6</th>
  </tr>
  </thead>

<tbody>
<tr>
  <td height="10" colspan="6">
    <div style="height:5px; overflow:scroll;">
        <!--put your new table here (content of tbody)-->

    </div>
</td>
</tr>