#html #css #html-table
Вопрос:
Мне действительно трудно понять, как стилизовать ширину столбцов в HTML — таблице. Я не могу понять, почему процентная ширина не применяется и почему столбцы внутри tfoot влияют на ширину столбцов в теле.
Может ли кто-нибудь пролить некоторый свет на это и, возможно, объяснить, как я могу установить столбцы в пределах tbody одной трети (33,333%), а столбцы в tfoot пределах половины (50%) и фактически охватить всю ширину таблицы (сейчас они охватывают только 2 столбца выше, а не 3 столбца)?
Любая помощь/руководство будут весьма признательны.
tbody,
tfoot {
width: 100%;
}
tbody tr td {
width: 33.333%;
}
tfoot tr th,
tfoot tr td {
width: 50%;
} <table border="1">
<tbody>
<tr>
<td>Body Row 1 Column 1</td>
<td>Body Row 1 Column 2</td>
<td>Body Row 1 Column 3</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Footer Row 1 Column 1</th>
<td>Footer Row 1 Column 2</td>
</tr>
<tr>
<th>Footer Row 2 Column 1</th>
<td>Footer Row 2 Column 2</td>
</tr>
<tr>
<th>Footer Row 3 Column 1</th>
<td>Footer Row 3 Column 2</td>
</tr>
</tfoot>
</table> Комментарии:
1. ну, это не так, как работают таблицы, вам понадобится как colspan. пытаетесь сделать макет в таблицах или просто отображаете данные?
2. Я просто пытаюсь вывести данные таблицы, но хочу контролировать ширину столбцов. Как будет работать colspan в этом случае?
3. Не бери в голову, я думаю, что понял это. Я неправильно думал о таблицах и нуждался в их упрощении. Спасибо, что уделили мне время!
Ответ №1:
Если вы не ограничены в использовании одной таблицы, почему бы не использовать просто таблицу внутри таблицы?
<tfoot>
<tr>
<td colspan="3">
<table>
<tbody>
<tr>
<td>First half</td>
<td>Second half</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tfoot>
Просто убедитесь , что стиль применяется так же хорошо, и дайте свой table table { width: 100%; } , без границ, полей, отступов и т. Д.
Я нахожу, что лучшие решения-это те, где вы игнорируете проблему.