我有一个正在处理的仪表板，其中包含一个宽度为 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 中都有记录。
最佳答案
好的，所以如果您为每个 <td> 使用稳定的宽度和 position: absolute;在第一个中，所以你可以对其余的 <td> 做同样的事情.
也许摆脱<table>并使用 <div>相反，它会更容易更好:)
关于html - 使用固定列定位奇怪的表格列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27279867/