Html 设置表格行高
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6398172/
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
Setting table row height
提问by Hiromi Nagashim
I have this code:
我有这个代码：
<table class="topics" >
<tr>
<td style="white-space: nowrap; padding: 0 5px 0 0; color:#3A5572; font-weight: bold;">Test</td>
<td style="padding: 0 4px 0 0;">1.0</td>
<td>abc</td>
</tr>
<tr>
<td style="white-space: nowrap; padding: 0 5px 0 0; color:#3A5572; font-weight: bold;">test2</td>
<td style="padding: 0 4px 0 0;">1.3</td>
<td>def</td>
</tr>
</table>
The rows are spaced too far apart. I want the lines closer together.
行间距太远。我希望线条更紧密。
What I did was to add the following CSS but it doesn't seem to change anything.
我所做的是添加以下 CSS，但它似乎没有改变任何东西。
.topics tr { height: 14px; }
What am I doing wrong?
我究竟做错了什么？
回答by refaelos
try this:
尝试这个：
.topics tr { line-height: 14px; }
.topics tr { line-height: 14px; }
回答by dave
try setting the attribute for tdso:
尝试为此设置属性td：
.topic td{ height: 14px };
回答by fijter
You can remove some extra spacing as well if you place a border-collapse: collapse;CSS statement on your table.
如果border-collapse: collapse;在表格上放置CSS 语句，也可以删除一些额外的间距。
回答by Tom Dickman
I found the best answer for my purposes was to use:
我发现我的目的的最佳答案是使用：
.topics tr {
overflow: hidden;
height: 14px;
white-space: nowrap;
}
The white-space: nowrapis important as it prevents your row's cells from breaking across multiple lines.
这white-space: nowrap很重要，因为它可以防止您行的单元格跨越多行。
I personnally like to add text-overflow: ellipsisto my thand tdelements to make the overflowing text look nicer by adding the trailing fullstops, for example Too long gets dots...
我个人喜欢添加text-overflow: ellipsis到我的th和td元素，例如通过添加尾随句号来使溢出的文本看起来更好Too long gets dots...
回答by Alex
line-height only works when it is larger then the current height of the content of <td>. So, if you have a 50x50 icon in the table, the trline-height will not make a row smaller than 50px (+ padding).
line-height 仅在它大于<td>. 因此，如果表格中有 50x50 图标，tr行高不会使行小于 50 像素（+ 填充）。
Since you've already set the padding to 0it must be something else,
for example a large font-size inside tdthat is larger than your 14px.
由于您已经将填充设置为0它必须是其他内容，
例如内部的大字体大小td大于您的 14px。
回答by 1man
If you are using Bootstrap, look at paddingof your tds.
如果您使用的是 Bootstrap，请查看padding您的tds.
回答by Md. Shafiqur Rahman
once I need to fix the height of a particular valued row by using inline CSS as following..
一旦我需要使用内联 CSS 来修复特定值行的高度，如下所示..
<tr><td colspan="4" style="height: 10px;">xxxyyyzzz</td></tr>
