Table cells fixed height regardless the content of the cell

Question

I have a dynamic table that I generate after getting some inputs from the user to present some tabular data. I need to know if there is away to assign a fixed height for the cells even if some of them have some content / text. I would like all the cells to have 30px height regardless if they have content or if they are empty.

This is the CSS I have:

table {
  width: 90%;
  height:100%;

}
    table th,  table td {
      border: 1px solid gray;
      height:30px !important;
      padding: 9px !important;
      width: 16%;
    }

The table is generated by this code:

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']]));
            }

But when I have a cell that has some text, the cell height expands anyway. Any ideas?

Should it say '...to assign fixed _WIDTH_..', or should that sat '_HEIGHT_' ? — Thor Jacobsen, Aug 25 '11 at 12:39

Bazzz · Accepted Answer · 2011-08-25T13:31:18.647

26

Table cells don't overflow so you need to wrap the content in a div to use overflow

Here is an example: 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;
}

Your 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']]));
}

Note that I don't exactly know the syntax for the framework that you use, but I'd guess your php will look something like this.

edited Aug 25 '11 at 13:31

answered Aug 25 '11 at 12:50

Bazzz

26,427
12
52
69

:Thank you, The table rows are generated by the added PHP code. Please check the code above. Where can I add the div? – digitup Aug 25 '11 at 13:10
Please see my update. I don't know the exact syntax of your php framework but I think I made a fair guess :) – Bazzz Aug 25 '11 at 13:24

score 1 · Answer 2 · answered Jun 17 '20 at 10:03

1

I fixed it by removing padding from table cells, and adding rule height: something.

answered Jun 17 '20 at 10:03

luky

2,263
3
22
40

score -4 · Answer 3 · answered Aug 25 '11 at 12:39

-4

Try to add "overflow: hidden" to the css for th/td.

answered Aug 25 '11 at 12:39

Alexander Sulfrian

3,533
1
16
9

Look here is a similar question with solution: http://stackoverflow.com/questions/1554928/how-to-hide-table-row-overflow – Alexander Sulfrian Aug 25 '11 at 12:49
thank you but still when I add the overflow and follow the solution mentioned the table width expands to 100% instead of 90% to accommodate the white-space: nowrap. – digitup Aug 25 '11 at 13:27

Table cells fixed height regardless the content of the cell

3 Answers3

Linked