Question

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

我找到了通过使用sepparate表格进行第一次启动来滚动它们的方法，以及使用第二个表格的正文部分，该表格位于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>

滚动属性表的正文部分无法正常工作

1 个答案: