表格主体部分的滚动属性不起作用

发布于 2025-01-04 22:09:40 字数 2913 浏览 1 评论 0原文

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

我找到了滚动它们的方法，方法是使用单独的表使用第一个标题，并使用第二个表来滚动它们，该第二个表位于给定滚动属性的 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>

原文

I have a table in which headers should be fixed at their positions and scrolling content.

I found way to scroll them by making first headeing using by a sepparate tables, and body part using a second table which is inside a div which is given scroll property.

But when the number of columns are getting increased, alligning the headings in first table and content in second table is getting difficult.

Thats why I am forced to create a scroll in tbody. But it is not working. I tried to give scroll property to the tbody part and fixed its height, but it is not scrolling.

The code which I am trying to correct is,

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

And the code which creates fixed headers using 2 tables is

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

白首有我共你 2025-01-11 22:09:40

试试这样

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

try it like this

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

回复收藏 0 原文

~没有更多了~