Плохая практика задавать ячейку таблицы высотой 1 пиксель?

Я создаю форму, для которой я использую таблицы для создания макета. Содержимое всех ячеек таблицы выровнено по верхнему краю. Я создал красивый рисунок этого здесь:

|--------------|----|
|      1       |    |
|--------------|  3 |
|              |    |
|      2       |    |
|--------------|----|

В ячейках 1 и 2 обычно больше содержимого, поэтому они обычно определяют высоту всей таблицы. Однако иногда в ячейке 3 содержится больше содержимого — настолько, что она требует большей высоты, чем ячейки 1 и 2, поэтому другие ячейки растягиваются. Это означает, что в нижней части ячейки 1 будет большая пустая область.

Итак, я хочу, чтобы ячейка 1 всегда имела минимальный вес, поэтому, если ячейка 3 растягивает таблицу, дополнительное пространство будет располагаться внизу ячейки 3. Для этого я присвоил ячейке 1 высоту 1 пиксель в css. Тогда он всегда будет пытаться иметь высоту 1 пиксель, что означает, что он всегда будет иметь наименьшую возможную высоту.

Это плохая практика? Это работает во всех браузерах?

РЕДАКТИРОВАТЬ: ячейка 3 имеет левую границу в 1 пиксель, которую я всегда хочу следовать за страницей до конца. Вот почему я не использую div.


html css tabular cell
person Marcus Edensky    schedule 21.08.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Эту форму трудно получить из таблицы, потому что изменение в каждой ячейке увеличит весь столбец. Это скрипка Вместо этого вы можете попробовать следующий код.

<div id='column1'>
    <div class='cell1'>This is content 1</div>
    <div class='cell2'>This is content 2</div>
</div>
<div class='cell3'>This is content 3</div>

И стиль будет

body
{
    width:410px;
    color:#fff;

}
div#column1 {
    float:left;
width:200px;

}
div#column1 div.cell1,div#column1 div.cell2
{
    width:200px;
    height:200px;
    background:#333;
    display:block;
    margin-bottom:10px;
}
div.cell3
{
    float:right;
    display:block;
    height:400px;
    width:200px;
    background:#00b3ff;

}
person Hamza Dhamiya    schedule 21.08.2013
comment
Спасибо Мухаммед за ваш комментарий. Я также предпочел бы использовать div, лично я бы переместил панель 3 вправо и применил overflow: hidden к столбцу, содержащему div 1 и 2. Хотя причина, по которой я использую таблицы, заключается в том, что в ячейке 3 есть граница 1px слева. , Поскольку я не знаю, какой столбец будет иметь наибольшую высоту, они должны изменять размер вместе. Я обновлю пост об этом. - person Marcus Edensky; 21.08.2013