滚动 HTML 嵌套表
如果给定最大高度,如何使具有子/嵌套表格的表格可滚动?我不希望 ad 随之滚动。我真正想要的是一些可以将我的 s 包裹起来的有效标签,或者一些其他与此一样有效的标记:
<table>
<thead>
<tr>
<th>Column1</th>
<th>Column2</th>
</tr>
</thead>
<!-- Insert valid tag here to wrap <tbody>s -->
<tbody>
<tr>
<td>Val1</td>
<td>Val2</td>
</tr>
<tr class="sub-table">
<td colspan="2">
<table>
<thead>
<tr>
<th>Sub Column1</th>
<th>Sub Column2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sub Val1</td>
<td>Sub Val2</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Val1</td>
<td>Val2</td>
</tr>
<tr class="sub-table">
<td colspan="2">
<table>
<thead>
<tr>
<th>Sub Column1</th>
<th>Sub Column2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sub Val1</td>
<td>Sub Val2</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
<!-- Insert valid close tag here -->
</table>
How can I make a table which has sub/nested tables scrollable if given a max height? I do not want the thead to scroll with it. What I'm really looking for is some valid tag that I can wrap my s in, or some other markup that will work just as well as the this:
<table>
<thead>
<tr>
<th>Column1</th>
<th>Column2</th>
</tr>
</thead>
<!-- Insert valid tag here to wrap <tbody>s -->
<tbody>
<tr>
<td>Val1</td>
<td>Val2</td>
</tr>
<tr class="sub-table">
<td colspan="2">
<table>
<thead>
<tr>
<th>Sub Column1</th>
<th>Sub Column2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sub Val1</td>
<td>Sub Val2</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Val1</td>
<td>Val2</td>
</tr>
<tr class="sub-table">
<td colspan="2">
<table>
<thead>
<tr>
<th>Sub Column1</th>
<th>Sub Column2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sub Val1</td>
<td>Sub Val2</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
<!-- Insert valid close tag here -->
</table>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
如果我正确理解你的问题,也许可以尝试这样的事情: http://jsfiddle.net/pPuXL/1/< /a>
您需要将 TBODY 元素显示为“块”或“内联块”,以便溢出对其起作用,如我发布的 CSS 示例中所示。
If I understand your question correctly, maybe try something like this: http://jsfiddle.net/pPuXL/1/
You need to display the TBODY elements as "block" or "inline-block" in order for overflow to work on it, as in the CSS example I posted.