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 td
so:
尝试为此设置属性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: nowrap
is important as it prevents your row's cells from breaking across multiple lines.
这white-space: nowrap
很重要,因为它可以防止您行的单元格跨越多行。
I personnally like to add text-overflow: ellipsis
to my th
and td
elements 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 tr
line-height will not make a row smaller than 50px (+ padding).
line-height 仅在它大于<td>
. 因此,如果表格中有 50x50 图标,tr
行高不会使行小于 50 像素(+ 填充)。
Since you've already set the padding to 0
it must be something else,
for example a large font-size inside td
that is larger than your 14px.
由于您已经将填充设置为0
它必须是其他内容,
例如内部的大字体大小td
大于您的 14px。
回答by 1man
If you are using Bootstrap, look at padding
of your td
s.
如果您使用的是 Bootstrap,请查看padding
您的td
s.
回答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>