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

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 个表创建固定标题的代码是

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