我有一个只有两列的表,我希望其中的第一列是固定的,而其他列是可水平滚动的。 表可以有很多行。可滚动应作为一个组应用于所有右列,而不是单个列。
下面是我的表结构
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1,cell 1</td>
<td>row 1,cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
提前致谢。
最佳答案
如果您希望谁有权列作为一个单元格,您可以按如下方式设置表格:
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td rowspan="2" class="scroll">spans across as may rows as rowspan, vertically</td>
</tr>
<tr>
<td>row 2, cell2 </td>
</tr>
</table>
对于滚动,您的选择取决于您的目标浏览器,如果您不关心 IE 的非当前版本(8 及之前),那么您可以简单地将以下样式应用于 tall td:
td.scroll {
overflow-x: auto;
overflow-y: hidden;
}
如果你需要适应 IE 8,那么你可以应用这种风格
overflow: auto;
并且必须确保单元格的垂直内容高度不足以导致垂直滚动条。如果您只想将第一列作为固定值的目标,
td:first-child {
width: 120px
}
会成功的。
编辑:
您正在寻找的效果比我最初想象的要难得多 - 覆盖表格的默认大小和行为需要很多时间。看起来表格对内部滚动有很强的抵抗力,事实上,如果内部内容比 td
定义的宽度宽,即使表格比定义的宽度和 overflow
设置为 scroll
,td
仍会扩展以适应内容。据我所知(如果我错了请纠正我),制作 td
滚动的唯一方法是添加 max-width
。此外,您想要的 fixed with 列必须为其设置了 min-width
属性。这是我的实验:
http://jsfiddle.net/thundercracker/8CUsm/19/
我认为这不是很流畅,但是,第二列将始终扩展到 max-width 属性中定义的宽度。
如果您试图设置此表格来布置页面,我强烈建议您不要这样做。虽然它相当复杂,但这里有一个更流畅的替代布局;您可以尝试更改表中的行数和正文的宽度,它的行为方式相同。
http://jsfiddle.net/thundercracker/adD3E/67/
我必须将部分设置归功于此线程:
CSS - Expand float child DIV height to parent's height
我实际上有点希望我是错的 - 创建这样的布局不需要那么多,所以如果有人有更简单的方法,请发布它。
编辑:替代布局适用于所有主要浏览器,并且在 IE 7 中只有一些我认为可以轻松修复的小问题(尽管我已经错了一次),因此这是非常跨浏览器有效的。
关于html - 如何创建第一列固定且下一列可水平滚动的 HTML 表格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11817388/