Таблица ячеек фиксированной высоты независимо от содержимого ячейки
У меня есть динамическая таблица, которую я генерирую после получения некоторых входных данных от пользователя для представления некоторых табличных данных. Мне нужно знать, есть ли возможность назначить фиксированную высоту для ячеек, даже если некоторые из них имеют некоторый контент / текст. Я хотел бы, чтобы все ячейки имели высоту 30 пикселей независимо от того, имеют ли они содержимое или они пусты.
Это CSS у меня есть:
table {
width: 90%;
height:100%;
}
table th, table td {
border: 1px solid gray;
height:30px !important;
padding: 9px !important;
width: 16%;
}
Таблица генерируется этим кодом:
foreach ( $this->rows as $i => $row ) {
$tbody_tr = NHtml::el ('tr class="data-row-' . $i . '"');
foreach ( $this->fields as $field ) {
$tbody_tr->add(NHtml::el ('td')->class($field['name'])->setHtml(@$row[$field['name']]));
}
Но когда у меня есть ячейка с текстом, высота ячейки все равно увеличивается. Есть идеи?
2 ответа
Ячейки таблицы не переполняются, поэтому вам нужно обернуть содержимое в div, чтобы использовать переполнение
Вот пример: http://jsfiddle.net/avVQm/
HTML:
<table>
<tr>
<td>
<div>
gf asfdg fsagfag fdsa gfdsg fdsg fds g fdg
</div>
</td>
</tr>
</table>
CSS:
table {
width: 30px;
border: 1px solid black;
}
table td > div {
overflow: hidden;
height: 15px;
}
Ваш PHP:
foreach ((array)$this->fields as $field ) {
$wrapperdiv = NHtml::el ('div');
$tbody_tr->add($wrapperdiv);
$wrapperdiv->add(NHtml::el ('td')->class($field['name'])->setHtml(@$row[$field['name']]));
}
Обратите внимание, что я точно не знаю синтаксис фреймворка, который вы используете, но я думаю, ваш php будет выглядеть примерно так.
Я исправил это, удалив отступы из ячеек таблицы и добавив высоту правила: что-то.
Попробуйте добавить "переполнение: скрытый" в CSS для th/td.