Таблица ячеек фиксированной высоты независимо от содержимого ячейки - PullRequest
Новая
       22

Таблица ячеек фиксированной высоты независимо от содержимого ячейки

14 голосов
/ 25 августа 2011

У меня есть динамическая таблица, которую я генерирую после получения некоторых входных данных от пользователя для представления некоторых табличных данных.Мне нужно знать, есть ли возможность назначить фиксированную высоту для ячеек, даже если некоторые из них имеют некоторый контент / текст.Я хотел бы, чтобы все ячейки имели высоту 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 ]

24 голосов
/ 25 августа 2011

Ячейки таблицы не переполняются, поэтому вам нужно обернуть содержимое в 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будет выглядеть примерно так.

0 голосов
/ 25 августа 2011

Попробуйте добавить «переполнение: скрытый» к CSS для th / td.

...