CSS 表格单元格固定高度而不管单元格的内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7190460/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Table cells fixed height regardless the content of the cell
提问by digitup
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.
我有一个动态表，在从用户那里获得一些输入以呈现一些表格数据后生成。我需要知道是否可以为单元格分配一个固定的高度，即使它们中的一些有一些内容/文本。我希望所有单元格的高度为 30px，无论它们是否有内容或是否为空。
This is the CSS I have:
这是我拥有的 CSS：
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?
但是当我有一个包含一些文本的单元格时，单元格高度无论如何都会扩展。有任何想法吗？
回答by Bazzz
Table cells don't overflow so you need to wrap the content in a div to use overflow
表格单元格不会溢出，因此您需要将内容包装在 div 中才能使用溢出
Here is an example: http://jsfiddle.net/avVQm/
这是一个例子：http: //jsfiddle.net/avVQm/
HTML:
HTML：
<table>
<tr>
<td>
<div>
gf asfdg fsagfag fdsa gfdsg fdsg fds g fdg
</div>
</td>
</tr>
</table>
CSS:
CSS：
table {
width: 30px;
border: 1px solid black;
}
table td > div {
overflow: hidden;
height: 15px;
}
Your PHP:
你的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.
请注意，我并不完全了解您使用的框架的语法，但我猜您的 php 看起来像这样。
回答by Alexander Sulfrian
Try to add "overflow: hidden" to the css for th/td.
尝试在 th/td 的 css 中添加“溢出：隐藏”。
