Когда я создаю таблицу в html, таблицу с шириной 100%, если я хочу, чтобы все ячейки (tds) были разделены на равные части, должен ли я ввести % ширины для каждой ячейки? Я "обязан" это делать?
Например:
<table cellpadding="0" cellspacing="0" width="100%" border="0">
<tr>
<td width="25%"></td>
<td width="25%"></td>
<td width="25%"></td>
<td width="25%"></td>
</tr>
</table>
ИЛИ следующая процедура также может быть правильной, чтобы не писать ширину в каждом tds, если я хочу, чтобы каждый из них был разделен одинаково:
<table cellpadding="0" cellspacing="0" width="100%" border="0">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Я знаю, что это работает в обоих случаях, но я просто хочу знать "законный" способ сделать это.
Используйте свойство table-layout: fixed;
на столе, чтобы получить одинаково разнесенные ячейки. Если в столбце установлена ширина, то независимо от того, какое содержимое, это будет указанная ширина. Столбцы без набора ширины разделят любую комнату между собой.
<table style='table-layout:fixed;'>
<tbody>
<tr>
<td>gobble de gook</td>
<td>mibs</td>
</tr>
</tbody>
</table>
Просто чтобы выбросить его туда, вы также можете использовать < colgroup > < col span = '#' style = 'width: #%;' / > < / colgroup >
, который не требует повторение стиля для данных таблицы или предоставление таблицы идентификатора для использования в таблице стилей. Я думаю, что установки ширины в первом ряду достаточно.
Вам нужно ввести % ширины для каждой ячейки. Но подождите, есть лучший способ сделать это, он называется CSS:
<style>
.equalDivide tr td { width:25%; }
</style>
<table class="equalDivide" cellpadding="0" cellspacing="0" width="100%" border="0">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Да, вам нужно будет указать ширину для каждой ячейки, иначе они попытаются быть "умными" и разделят 100% между теми ячейками, которые посчитают, что им больше всего нужно. Ячейки с большим количеством содержимого будут занимать большую ширину, чем те, в которых его меньше.
Чтобы обеспечить одинаковую ширину для каждой ячейки, нужно сделать это наглядно. Либо сделайте это так, как вы уже делали, либо используйте CSS.
table.className td { width: 25%; }
Вы можете попробовать это, я бы сделал это с помощью CSS, но я думаю, что вы хотите это с таблицами без CSS.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<body leftmargin=0 rightmargin=0>
<table cellpadding="0" cellspacing="0" width="100%" border="1" height="350px">
<tr>
<td width="25%"> </td>
<td width="25%"> </td>
<td width="25%"> </td>
<td width="25%"> </td>
</tr>
</table>
</body>
</html>
Это определенно самый чистый ответ на вопрос: https://stackoverflow.com/a/14025331/1008519.
В сочетании с table-layout: fixed
я часто нахожу < colgroup >
отличным инструментом, позволяющим столбцам действовать так, как вы хотите (см. Кодепен здесь):
& Лт;!- начать фрагмент: js скрыть: false - >
table {
/* When set to 'fixed', all columns that do not have a width applied will get the remaining space divided between them equally */
table-layout: fixed;
}
.fixed-width {
width: 100px;
}
.col-12 {
width: 100%;
}
.col-11 {
width: 91.666666667%;
}
.col-10 {
width: 83.333333333%;
}
.col-9 {
width: 75%;
}
.col-8 {
width: 66.666666667%;
}
.col-7 {
width: 58.333333333%;
}
.col-6 {
width: 50%;
}
.col-5 {
width: 41.666666667%;
}
.col-4 {
width: 33.333333333%;
}
.col-3 {
width: 25%;
}
.col-2 {
width: 16.666666667%;
}
.col-1 {
width: 8.3333333333%;
}
/* Stylistic improvements from here */
.align-left {
text-align: left;
}
.align-right {
text-align: right;
}
table {
width: 100%;
}
table > tbody > tr > td,
table > thead > tr > th {
padding: 8px;
border: 1px solid gray;
}
<table cellpadding="0" cellspacing="0" border="0">
<colgroup>
<col /> <!-- take up rest of the space -->
<col class="fixed-width" /> <!-- fixed width -->
<col class="col-3" /> <!-- percentage width -->
<col /> <!-- take up rest of the space -->
</colgroup>
<thead>
<tr>
<th class="align-left">Title</th>
<th class="align-right">Count</th>
<th class="align-left">Name</th>
<th class="align-left">Single</th>
</tr>
</thead>
<tbody>
<tr>
<td class="align-left">This is a very looooooooooong title that may break into multiple lines</td>
<td class="align-right">19</td>
<td class="align-left">Lisa McArthur</td>
<td class="align-left">No</td>
</tr>
<tr>
<td class="align-left">This is a shorter title</td>
<td class="align-right">2</td>
<td class="align-left">John Oliver Nielson McAllister</td>
<td class="align-left">Yes</td>
</tr>
</tbody>
</table>
<table cellpadding="0" cellspacing="0" border="0">
<!-- define everything with percentage width -->
<colgroup>
<col class="col-6" />
<col class="col-1" />
<col class="col-4" />
<col class="col-1" />
</colgroup>
<thead>
<tr>
<th class="align-left">Title</th>
<th class="align-right">Count</th>
<th class="align-left">Name</th>
<th class="align-left">Single</th>
</tr>
</thead>
<tbody>
<tr>
<td class="align-left">This is a very looooooooooong title that may break into multiple lines</td>
<td class="align-right">19</td>
<td class="align-left">Lisa McArthur</td>
<td class="align-left">No</td>
</tr>
<tr>
<td class="align-left">This is a shorter title</td>
<td class="align-right">2</td>
<td class="align-left">John Oliver Nielson McAllister</td>
<td class="align-left">Yes</td>
</tr>
</tbody>
</table>
& Лт;!- конец фрагмента - >