Я пытаюсь создать таблицу в 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.
Спасибо