我正在尝试使用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解决方案不起作用，因为abspos元素的大小设置为可缩小以适合，表格并没有像输入单元格那样将计算所得的行高应用于它们。我不确定abspos单元格的display：table-cell甚至可能会被忽略。
无论如何，请如下尝试使用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>