Question

我有一个我正在处理的仪表板，其中包含一个宽度为100％的表格。在正常使用情况下，表格的列数多于屏幕不动产，仪表板会滚动显示结果。但是，根据新要求，我只显示选定的服务器。这是我发现问题的地方。

该表有许多列，但左侧主列列出了每一行，并且绝对位于页面的左侧。我附上了一些示例代码：

<html>
<head>
<style type="text/css">
.headercol {
    position:absolute;
    width: 15%;
    left: 0;
    top: auto;
    padding-right: 0;
    padding-left: 0;
}
</style>
</head>
<body>
<body style="height: 90%">
<table style="width: 100%; border: 1px solid blue;">
<tr>
    <td style="width: 200px;" class="headercol">asdf</td>
    <td style="width: 200px;">adsf</td>
    <td style="width: 200px;">adsf</td>
</tr>
</table>
</div>
</body>
</html>

问题是，在这个组织下，表格中不是headercol的所有列现在都是右对齐，在表格中间创建一个巨大的空间。我希望他们回到他们左派的立场。有谁知道这方面的工作？不使用position:absolute时布局恢复正常，但我们失去固定列。在正常条件下，这不是问题，因为有列可以弥补表中的空白区域。在IE11和Firefox 32中都注意到了这种行为。

Answer 1

好的，如果您在第一个<td>和position: absolute;中使用稳定宽度，那么您可以对<td>的其余部分执行相同操作。也许摆脱<table>并使用<div>代替，它会更容易和更好：）

Answer 2

我最终将所有TD移到左侧，并为第二列指定静态列的偏移量。之后剩下的列只有float: left，而且一切都很顺利。一种奇怪的做事方式，但它就像一种魅力。

奇怪的表格列使用固定列定位

2 个答案: