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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 09:10:41  来源:igfitidea点击:

Setting table row height

htmlcss

提问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到我的thtd元素,例如通过添加尾随句号来使溢出的文本看起来更好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>