#html #css
#HTML #css
Вопрос:
Я перепробовал все из других подобных вопросов, и ничего не работает, но я не могу заставить свои th и td заполнить ширину таблицы.
Таблица занимает 100% ширины содержащего div. Thead занимает 100%. Tbody занимает 100%. Tr занимают 100%.
Но 4-й и td столбцы будут занимать только около 50% ширины.
Я установил для них значение 25%, поскольку я всегда думал, что 4 x 25% добавят до 100%, но, по-видимому, не в CSS.
Я пробовал добавлять блок отображения в разных местах и пробовал множество других вещей, но ничего не работает.
Это то, что я сделал:
.booktable {
width: 100%;
overflow-y: scroll;
height: 55vh;
display: inline-block;
}
.booktable thead {
width: 100%;
display: inline-block;
}
.booktable tbody {
width: 100%;
display: block;
}
.booktable tr{
width: 100%;
display: block;
}
.booktable th{
width: 25%;
color: grey;
padding: 1vh;
font-size: 2vh;
border-bottom: 1px solid grey;
font-weight: bold;
position: sticky;
top: 0;
background-color: white;
}
.booktable td{
width: 25%;
font-size: 2.5vh;
text-align: center;
padding: 2vh;
color: grey;
}
<table class="booktable">
<thead>
<tr>
<th>Name</th>
<th>Category</th>
<th>Group</th>
<th>Balance</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name</td>
<td>Cat</td>
<td>Group</td>
<td>Balance</td>
</tr>
</tbody>
</table>
Пытался отображать встроенные блоки, абсолютные значения блоков и позиций, родственников, макеты таблиц, удаление отступов … ничего не работает.
Даже удвоение ширины до 200% или 50% для td.
Не хотел спрашивать, какой должен быть действительно простой ответ, и я пробовал столько, сколько мог, но должен был спросить, поскольку я пытался часами!
Любая помощь очень ценится.
Ответ №1:
Вы перезаписываете все режимы отображения, специфичные для конкретной таблицы, так что именно из-за этого у вас возникают проблемы, попробуйте это:
.booktable {
width:100%;
overflow-y: scroll;
height: 55vh;
display: table;
}
.booktable thead {
width: 100%;
}
.booktable tbody {
width: 100%;
}
.booktable tr{
width: 100%;
}
.booktable th{
width: 25%;
color: grey;
padding: 1vh;
font-size: 2vh;
border-bottom: 1px solid grey;
font-weight: bold;
position: sticky;
top: 0;
background-color: white;
}
.booktable td{
width: 25%;
font-size: 2.5vh;
text-align: center;
padding: 2vh;
color: grey;
}
<table class="booktable">
<thead>
<tr>
<th>Name</th>
<th>Category</th>
<th>Group</th>
<th>Balance</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name</td>
<td>Cat</td>
<td>Group</td>
<td>Balance</td>
</tr>
</tbody>
</table>
Ответ №2:
Вам нужно настроить таблицу, width
чтобы 100%
тогда все th,td
адаптировались 25%
к общей ширине.
Вот рабочий пример:
.booktable {
width: 100%
}
.booktable th, .booktable td{
width: 25%;
color: grey;
padding: 1vh;
font-size: 2vh;
border-bottom: 1px solid grey;
font-weight: bold;
position: sticky;
top: 0;
background-color: white;
}
.booktable td{
width: 25%;
font-size: 2.5vh;
text-align: center;
padding: 2vh;
color: grey;
}
<table class="booktable">
<thead>
<tr>
<th>Name</th>
<th>Category</th>
<th>Group</th>
<th>Balance</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name</td>
<td>Cat</td>
<td>Group</td>
<td>Balance</td>
</tr>
</tbody>
</table>