Question

我正在尝试在HTML中显示一个表，但似乎该表无法满足规范。我希望数据在屏幕上的相同位置，否则会导致用户误读数据时出现各种问题。所以我需要固定宽度的列。如果数据超过窗口的高度，我也希望列标题可以重新固定，因为有些用户确实使用它们。

如果可能，我不想安装任何第三方控件。无论如何，主人不会买任何东西。我不介意随页面下载的内容。

我正在考虑尝试使用文本框或标签制作可滚动的div，但我想我应该检查一下是否有人遇到过这个问题并想出了解决方案。

我在这里问：How to make a scrolling table with dynamic data 但没有人知道什么是错的。

然后我在这里问：How to get a table to fit its parent container? 这里的关键似乎是列宽。但没有使用表格的宽度似乎毫无意义。

提出这个问题：Why don't my column headings line up? 似乎也表明表永远不会起作用。设置此：

display: table-row-group

使列标题对齐，但表格无法滚动。

display: block

使表格滚动但列标题错误。

这是一个独立运作的例子。 http://jsfiddle.net/kjzcv9g2/

<style type="text/css" media="screen">
table, th, td {border: solid;}

thead {
display: block;
color: #f00;
background: #eee;
height: 35px; 
overflow-y: scroll; 
}

tbody {
display: block;
height: 100px;
overflow-y: scroll;
}

th, td {
width: 10em; 
font-weight: normal; 
}
</style>

<table>
<thead>
<tr>
<th>foo</th>
<th>bar</th>
</tr>
</thead>
<tbody>
<tr>
<td>foo</td>
<td>bar</td>
</tr>
</tbody>
</table>

但要让它发挥作用似乎是不可能的。

有关是否使用标签或文本框创建自己的表的任何建议吗？

Answer 1

JSFIDDLE

如果我正确理解了这个问题，上述内容应该有效。在整个表格中添加min-width，您将在最小宽度下方拥有固定宽度的列，并且列将在容器中填充最小宽度。

替代表格来显示数据？

1 个答案: