I have a dynamic table that I generate after getting some inputs fro开发者_如何学Cm 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?
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.
I fixed it by removing padding from table cells, and adding rule height: something.
Try to add "overflow: hidden" to the css for th/td.
精彩评论