Таблица HTML не отображается правильно при объединении строк соседних столбцов
У меня есть таблица HTML с двумя столбцами и четырьмя строками, и некоторые ячейки объединены, что, по моему мнению, вызывает ошибку рендеринга.
Ниже я показываю код таблицы до слияния, вызывающего проблему:
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-spacing: 0;
}
td {
border: 1px black solid;
}
td {
width: 300px;
height: 100px;
background-color: aqua;
}
.no-width {
width: 0;
border-width: 0;
background-color: rgba(0, 0, 0, 0);
}
</style>
</head>
<body>
<table>
<tr>
<!-- Row 1 -->
<!-- <td class = "no-width"></td> -->
<td> Data cells {1, 1} </td>
<td> Data cells {1, 2} </td>
</tr>
<tr>
<!-- Row 2 -->
<!-- <td class = "no-width"></td> -->
<td rowspan = "2"> Data cells {2, 1} and {3, 1} rowspan = "2" </td>
<td> Data cells {2, 2} </td>
</tr>
<tr>
<!-- Row 3 -->
<!-- <td class = "no-width"></td> -->
<td style = "background-color:lightpink;"> Data cells {3, 2} </td>
</tr>
<tr>
<!-- Row 4 -->
<!-- <td class = "no-width"></td> -->
<td> Data cells {4, 1} </td>
<td style = "background-color:lightpink;"> Data cells {4, 2} </td>
</tr>
</table>
</body>
</html>Ниже показана соответствующая веб-страница. Обратите внимание, что я идентифицирую каждую ячейку данных с помощью кортежей {m, n}, где _m_ и _n_ — индексы строки и столбца соответственно. Обратите внимание, что ячейки {2, 1} и {3, 1} объединены.
Теперь я собираюсь объединить ячейки {3, 2} и {4, 2}, поэтому я добавляю атрибут rowspan="2" для элемента td с именем "Ячейки данных {3, 2}" в строке 3 и удаляю td. с именем «Ячейки данных {4, 2}» в строке 4, что приводит к следующему коду:
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-spacing: 0;
}
td {
border: 1px black solid;
}
td {
width: 300px;
height: 100px;
background-color: aqua;
}
.no-width {
width: 0;
border-width: 0;
background-color: rgba(0, 0, 0, 0);
}
</style>
</head>
<body>
<table>
<tr>
<!-- Row 1 -->
<!-- <td class = "no-width"></td> -->
<td> Data cells {1, 1} </td>
<td> Data cells {1, 2} </td>
</tr>
<tr>
<!-- Row 2 -->
<!-- <td class = "no-width"></td> -->
<td rowspan = "2"> Data cells {2, 1} and {3, 1} rowspan = "2" </td>
<td> Data cells {2, 2} </td>
</tr>
<tr>
<!-- Row 3 -->
<!-- <td class = "no-width"></td> -->
<td style = "background-color:lightpink;" rowspan = "2">
Data cells {3, 2} and {4, 2} rowspan = "2"
</td>
</tr>
<tr>
<!-- Row 4 -->
<!-- <td class = "no-width"></td> -->
<td> Data cells {4, 1} </td>
</tr>
</table>
</body>
</html>Обратите внимание: хотя присутствуют все 4 элемента tr, в таблице показаны только 3 строки. Ячейки данных 3-й и 4-й строк фактически выставлены в 3-й, скажем, «визуальной» строке, а 4-я «визуальная» строка не отображается.
Чтобы решить эту проблему, я добавил в таблицу первый «скрытый» столбец, как показано ниже:
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-spacing: 0;
}
td {
border: 1px black solid;
}
td {
width: 300px;
height: 100px;
background-color: aqua;
}
.no-width {
width: 0;
border-width: 0;
background-color: rgba(0, 0, 0, 0);
}
</style>
</head>
<body>
<table>
<tr>
<!-- Row 1 -->
<td class = "no-width"></td>
<td> Data cells {1, 1} </td>
<td> Data cells {1, 2} </td>
</tr>
<tr>
<!-- Row 2 -->
<td class = "no-width"></td>
<td rowspan = "2"> Data cells {2, 1} and {3, 1} rowspan = "2" </td>
<td> Data cells {2, 2} </td>
</tr>
<tr>
<!-- Row 3 -->
<td class = "no-width"></td>
<td style = "background-color:lightpink;" rowspan = "2">
Data cells {3, 2} and {4, 2} rowspan = "2"
</td>
</tr>
<tr>
<!-- Row 4 -->
<td class = "no-width"></td>
<td> Data cells {4, 1} </td>
</tr>
</table>
</body>
</html>Полученные веб-страницы теперь отображаются так, как ожидалось:
В принципе, я думал, что это проблема рендеринга. Я знаю, что каждая строка (<tr>) должна содержать одинаковое количество ячеек данных, чтобы предотвратить ошибки отображения, но эта таблица имеет одинаковое количество элементов <td> в каждой строке, если мы принимаем во внимание диапазоны строк. Однако разные браузеры ведут себя подобным образом, и я отказываюсь верить, что все они используют один и тот же механизм рендеринга, поэтому я пришел к выводу, что мой код неверен. Но что не так? Я не могу этого понять.
Ребята, помогите мне понять, в чем здесь ошибка, пожалуйста? Или это ожидаемое поведение, и мне следует продолжать использовать этот прием, добавляя в таблицу «невидимый» столбец?
рабочий пример для демонстрации быстрого решения: jsfiddle.net/n9muwk5a
Что касается объяснения, то официальная ссылка на обработку табличной модели — html.spec.whatwg.org/multipage/…
@Милан, ваше быстрое исправление позволило понять, что высота 3-й строки равна нулю из-за отсутствия собственного содержимого. Это так?
@Милан, как ты заметил, tr{height: 50px;} делает свое дело. Однако tr{min-height: 50px;} этого не делает — знаете почему?
Короче говоря, да, высота была равна нулю, но элементы должны занимать пустой слот. Что касается неприменения минимальной высоты, вы можете найти множество ответов и обходных путей.
Ответы 1
Вот демонстрация того, как ячейки таблицы вписываются в доступные слоты (подробнее об обработке модели таблицы здесь).
ПРИМЕЧАНИЕ. Для строк таблицы задана высота, чтобы можно было видеть диапазон строк.
Я использовал раскраску и отобразил две таблицы в качестве демонстрации.
table {
border-spacing: 0;
}
tr {
height: 50px;
}
td {
border: 1px black solid;
width: 300px;
background-color: aqua;
}
.lg {
background-color: lightgreen;
}
.lp {
background-color: lightpink;
}<table>
<caption>Table 1:</caption>
<tr>
<!-- Row 1 -->
<td> Data cells {1, 1} </td>
<td> Data cells {1, 2} </td>
</tr>
<tr>
<!-- Row 2 -->
<td> Data cells {2, 1} </td>
<td class = "lg" rowspan = "2">Data cells {2, 2} and {3, 2} rowspan = "2" </td>
</tr>
<tr>
<!-- Row 3 -->
<td class = "lp" rowspan = "2">Data cells {3, 1} and {4, 1} rowspan = "2"
</td>
</tr>
<tr>
<!-- Row 4 -->
<td> Data cells {4, 2} </td>
</tr>
</table>
<table>
<caption>Table 2:</caption>
<tr>
<!-- Row 1 -->
<td> Data cells {1, 1} </td>
<td> Data cells {1, 2} </td>
</tr>
<tr>
<!-- Row 2 -->
<td style = "background-color:lightgreen;" rowspan = "2">Data cells {2, 1} and {3, 1} rowspan = "2" </td>
<td> Data cells {2, 2} </td>
</tr>
<tr>
<!-- Row 3 -->
<td style = "background-color:lightpink;" rowspan = "2">Data cells {3, 2} and {4, 2} rowspan = "2" </td>
</tr>
<tr>
<!-- Row 4 -->
<td> Data cells {4, 1} </td>
</tr>
</table>Кроме того, вот изображение выходной страницы (две таблицы примера):
Поможет ли быстрое решение, например, добавление высоты строк? тр {высота: 50 пикселей; }