Ширина ячейки таблицы html для разных строк
Возможный дубликат:
проблема с шириной ячейки таблицы
У меня есть таблица, настроенная как
<html>
<body bgcolor="#14B3D9">
<table width="100%" border="1" bgcolor="#ffffff">
<tr>
<td width="25%">25</td>
<td width="50%">50</td>
<td width="25%">25</td>
</tr>
<tr>
<td width="50%">50</td>
<td width="30%">30</td>
<td width="20%">20</td>
</tr>
</table>
</body>
</html>
Как мне получить 2 строки для различной ширины ячейки?
Ответы
Ответ 1
Насколько я знаю, это невозможно, и это имеет смысл, поскольку то, что вы пытаетесь сделать, противоречит идее представления табличных данных. Однако вы можете поместить данные в несколько таблиц и удалить любые дополнения и поля между ними для достижения того же результата, по крайней мере, видимо. Что-то вроде:
<html>
<head>
<style type="text/css">
.mytable {
border-collapse: collapse;
width: 100%;
background-color: white;
}
.mytable-head {
border: 1px solid black;
margin-bottom: 0;
padding-bottom: 0;
}
.mytable-head td {
border: 1px solid black;
}
.mytable-body {
border: 1px solid black;
border-top: 0;
margin-top: 0;
padding-top: 0;
margin-bottom: 0;
padding-bottom: 0;
}
.mytable-body td {
border: 1px solid black;
border-top: 0;
}
.mytable-footer {
border: 1px solid black;
border-top: 0;
margin-top: 0;
padding-top: 0;
}
.mytable-footer td {
border: 1px solid black;
border-top: 0;
}
</style>
</head>
<body>
<table class="mytable mytable-head">
<tr>
<td width="25%">25</td>
<td width="50%">50</td>
<td width="25%">25</td>
</tr>
</table>
<table class="mytable mytable-body">
<tr>
<td width="50%">50</td>
<td width="30%">30</td>
<td width="20%">20</td>
</tr>
</table>
<table class="mytable mytable-body">
<tr>
<td width="16%">16</td>
<td width="68%">68</td>
<td width="16%">16</td>
</tr>
</table>
<table class="mytable mytable-footer">
<tr>
<td width="20%">20</td>
<td width="30%">30</td>
<td width="50%">50</td>
</tr>
</table>
</body>
</html>
Ответ 2
Одним из решений было бы разделить таблицу на 20 столбцов с шириной 5% каждый, а затем использовать colspan для каждого реального столбца, чтобы получить требуемую ширину, например:
<html>
<body bgcolor="#14B3D9">
<table width="100%" border="1" bgcolor="#ffffff">
<colgroup>
<col width="5%"><col width="5%">
<col width="5%"><col width="5%">
<col width="5%"><col width="5%">
<col width="5%"><col width="5%">
<col width="5%"><col width="5%">
<col width="5%"><col width="5%">
<col width="5%"><col width="5%">
<col width="5%"><col width="5%">
<col width="5%"><col width="5%">
<col width="5%"><col width="5%">
</colgroup>
<tr>
<td colspan=5>25</td>
<td colspan=10>50</td>
<td colspan=5>25</td>
</tr>
<tr>
<td colspan=10>50</td>
<td colspan=6>30</td>
<td colspan=4>20</td>
</tr>
</table>
</body>
</html>
Ответ 3
Вы не можете иметь ячейки произвольно различной ширины, это обычно стандартное поведение таблиц из любого пространства, например. Excel, иначе это больше не таблица, а просто список текста.
Однако вы можете иметь ячейки, охватывающие несколько столбцов, например:
<table>
<tr>
<td>25</td>
<td>50</td>
<td>25</td>
</tr>
<tr>
<td colspan="2">75</td>
<td>20</td>
</tr>
</table>
В стороне, вы должны избегать использования атрибутов стиля, таких как border и bgcolor, и предпочитаете CSS для них.
Ответ 4
с 5 столбцами и colspan, это возможно (нажмите здесь) (но для меня это не имеет смысла):
<table width="100%" border="1" bgcolor="#ffffff">
<colgroup>
<col width="25%">
<col width="25%">
<col width="25%">
<col width="5%">
<col width="20%">
</colgroup>
<tr>
<td>25</td>
<td colspan="2">50</td>
<td colspan="2">25</td>
</tr>
<tr>
<td colspan="2">50</td>
<td colspan="2">30</td>
<td>20</td>
</tr>
</table>
