html - 如何设置固定的表格高度并将剩余行显示在新列中?

标签 html css-tables

目前表格垂直展开。我希望它停在某个固定的高度并继续在它旁边的一列中。本质上,我希望表格在固定位置触底并从顶部继续。

我总共有大约 74 行,我想在三个单独的列中平均显示它们。过去,我通过简单地使用三个宽度为 33% 的单独表格来完成此操作,但如果我正在实现一些额外的排序选项,这将不起作用。

table.full {
position: absolute;
top: 0%;
left: 0%;
height: 100%;
width: 32%;
display: in-line;
border-collapse: collapse;
line-height: 1em;
table-layout: fixed;    

            <table class="full">
            <colgroup>
            <col style="width: 75%">
            <col style="width: 25%"></colgroup>
            <tr><td>content</td><td>content</td></tr>
            <tr><td>content</td><td>content</td></tr>
            <tr><td>content</td><td>content</td></tr>
            <tr><td>content</td><td>content</td></tr>
            <tr><td>content</td><td>content</td></tr>
            <tr><td>content</td><td>content</td></tr>
            <tr><td>content</td><td>content</td></tr> and so on...
            </table>

我觉得应该很简单。

最佳答案

@kevMoe,构建表格可能很简单,但是自定义响应表格可能很耗时,我认为您正在寻找的是在特定高度将新行堆叠在现有行旁边,查看 Display rows of a table side by side ,我想这就是你要找的。

关于html - 如何设置固定的表格高度并将剩余行显示在新列中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57172120/

相关文章:

css - 使用 css 选择器选择没有表头的表行

html - 如何在colgroup上获得轮廓边框?

javascript - OpenLayers:OSM 未显示在 div 上

javascript - 限制滚动到目标 id

css - 如何在 CSS HTML5 中将表格居中对齐?

html - 为什么 flex-box 适用于 div,而不适用于表格?

javascript - 带有固定标题的嵌入式表格垂直滚动

javascript - 在 Canvas 上绘制图像并导出打印质量图像

javascript - 悬停时 setInterval 中图像闪烁

asp.net - 使用 abcpdf 下载 html 文件为 pdf