我正在尝试在 HTML 中创建一个具有以下属性的表格:
- 第一列被卡住
- 标题行的文字被换行
听起来很简单，但我遇到了标题行中第一列的高度错误的问题，我希望它与该行的其余部分匹配。这是一个例子:
tr th {
white-space: pre-wrap !important;
}
tr td {
white-space: nowrap;
}
.first-column {
position: absolute;
width: 140px;
background-color: aliceblue;
white-space: nowrap;
}
.first-column.header {
background-color: red;
}
.second-column {
padding-left: 145px !important;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-12">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th class="first-column header">Aaaaa aaaaa</th>
<th class="second-column">Bbb bbb bbb</th>
<th>Cc cccc</th>
<th>Ddddd dd dd ddddd</th>
<th>E</th>
<th>Ffff</th>
<th>Bbb bbb bbb</th>
<th>Cc cccc</th>
<th>Ddddd dd dd ddddd</th>
<th>E</th>
<th>Ffff</th>
<th>Cc cccc</th>
<th>Ddddd dd dd ddddd</th>
<th>E</th>
<th>Ffff</th>
<th>Bbb bbb bbb</th>
<th>Cc cccc</th>
<th>Ddddd dd dd ddddd</th>
<th>E</th>
<th>Ffff</th>
</tr>
</thead>
<tbody>
<tr>
<td class="first-column">dsfgsgs gsdfg</td>
<td class="second-column">dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
</tr>
<tr>
<td class="first-column">dsfgsgs gsdfg</td>
<td class="second-column">dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
</tr>
<tr>
<td class="first-column">dsfgsgs gsdfg</td>
<td class="second-column">dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
</tr>
<tr>
<td class="first-column">dsfgsgs gsdfg</td>
<td class="second-column">dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
</tr>
<tr>
<td class="first-column">dsfgsgs gsdfg</td>
<td class="second-column">dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
</tr>
<tr>
<td class="first-column">dsfgsgs gsdfg</td>
<td class="second-column">dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
</tr>
<tr>
<td class="first-column">dsfgsgs gsdfg</td>
<td class="second-column">dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
</tr>
<tr>
<td class="first-column">dsfgsgs gsdfg</td>
<td class="second-column">dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>如果运行上面的代码，您会看到 Aaaaa aaaaa 列的高度与行的其余部分不一致。将其高度设置为 100% 将该列设置为表格的高度，而不是行的高度。我希望答案很简单，我只是错过了一些明显的 CSS，但我有点难过，所以希望能提供一些帮助。
我的一个解决方案是使用 Javascript 动态设置高度，如下所示:
<script>
window.addEventListener("resize", function() {
var firstColumnHeader = document.getElementById('first-column-header');
var secondColumnHeader = document.getElementById('second-column-header');
firstColumnHeader.style.height = secondColumnHeader.clientHeight;
});
</script>
</head>
<body>
<div class="row">
<div class="col-md-12">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th id="first-column-header" class="first-column header">Aaaaa aaaaa</th>
<th id="second-column-header" class="second-column">Bbb bbb bbb</th>
我想尽可能避免使用 Javascript，但是，这似乎是我应该能够使用 CSS 完成的事情。
谢谢
最佳答案
我认为您已经得出结论，position:absolute 不起作用，因为该表没有像在流入单元格中那样将使用过的行高应用于绝对单元格。浏览器强加的 display:table-cell 甚至可能会被 abspos 单元格忽略，我不确定。
无论如何，试试新的 position: sticky 和 left: xx 如下。有了这个，您不需要复制第二列填充的宽度来为第一列腾出空间。
tr th {
white-space: pre-wrap !important;
}
tr td {
white-space: nowrap;
}
.first-column {
position: sticky;
left: 0px;
width: 140px;
background-color: aliceblue;
white-space: nowrap;
}
.first-column.header {
background-color: red;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-12">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th class="first-column header">Aaaaa aaaaa</th>
<th class="second-column">Bbb bbb bbb</th>
<th>Cc cccc</th>
<th>Ddddd dd dd ddddd</th>
<th>E</th>
<th>Ffff</th>
<th>Bbb bbb bbb</th>
<th>Cc cccc</th>
<th>Ddddd dd dd ddddd</th>
<th>E</th>
<th>Ffff</th>
<th>Cc cccc</th>
<th>Ddddd dd dd ddddd</th>
<th>E</th>
<th>Ffff</th>
<th>Bbb bbb bbb</th>
<th>Cc cccc</th>
<th>Ddddd dd dd ddddd</th>
<th>E</th>
<th>Ffff</th>
</tr>
</thead>
<tbody>
<tr>
<td class="first-column">dsfgsgs gsdfg</td>
<td class="second-column">dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
</tr>
<tr>
<td class="first-column">dsfgsgs gsdfg</td>
<td class="second-column">dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
</tr>
<tr>
<td class="first-column">dsfgsgs gsdfg</td>
<td class="second-column">dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
</tr>
<tr>
<td class="first-column">dsfgsgs gsdfg</td>
<td class="second-column">dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
</tr>
<tr>
<td class="first-column">dsfgsgs gsdfg</td>
<td class="second-column">dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
</tr>
<tr>
<td class="first-column">dsfgsgs gsdfg</td>
<td class="second-column">dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
</tr>
<tr>
<td class="first-column">dsfgsgs gsdfg</td>
<td class="second-column">dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
</tr>
<tr>
<td class="first-column">dsfgsgs gsdfg</td>
<td class="second-column">dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
<td>dsfgsgs gsdfg</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>关于html - 卡住表中的第一列，并在标题行设置为换行空白处保持一致的高度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58059167/