Html 插入高度较小的空白表格行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9738876/
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
Inserting a blank table row with a smaller height
提问by Ed.
I have a table consisting of a header row and a couple of data rows. What I want to do is to create a blank row in between the header and the data rows, but I want this blank row to be smaller in height than the other rows (so that there isn't such a large gap).
我有一个由标题行和几个数据行组成的表。我想要做的是在标题和数据行之间创建一个空白行，但我希望这个空白行的高度比其他行小（这样就不会有这么大的差距）。
How can I accomplish this?
我怎样才能做到这一点？
My HTML mark-up code for the table is as follows:
我的表格 HTML 标记代码如下：
<table class="action_table">
<tbody>
<tr class="header_row">
<td>Header Item</td>
<td>Header Item 2</td>
<td>Header Item 3</td>
</tr>
<tr class="blank_row">
<td bgcolor="#FFFFFF" colspan="3"> </td>
</tr>
<tr class="data_row">
<td>Data Item</td>
<td>Data Item 2</td>
<td>Data Item 3</td>
</tr>
</tbody>
</table>
回答by Tom
Just add the CSS rule (and the slightly improved mark-up) posted below and you should get the result that you're after.
只需添加下面发布的 CSS 规则（以及稍微改进的标记），您应该会得到您想要的结果。
CSS
CSS
.blank_row
{
height: 10px !important; /* overwrites any other rules */
background-color: #FFFFFF;
}
HTML
HTML
<tr class="blank_row">
<td colspan="3"></td>
</tr>
Since I have no idea what your current stylesheet looks like I added the !importantproperty just in case. If possible, though, you should remove it as one rarely wants to rely on !importantdeclarations in a stylesheet considering the big possibility that they will mess it up later on.
由于我不知道您当前的样式表是什么样的，我添加了该!important属性以防万一。但是，如果可能的话，您应该删除它，因为!important考虑到它们以后会弄乱它的很大可能性，人们很少希望依赖样式表中的声明。
回答by Mr Lister
You don't need an extra table row to create space inside a table. See this jsFiddle.
(I made the gap light grey in colour, so you can see it, but you can change that to transparent.)
您不需要额外的表格行来在表格内创建空间。看到这个 jsFiddle。
（我将间隙设为浅灰色，这样您就可以看到它，但您可以将其更改为透明。）
Using a table row just for display purposes is table abuse!
仅出于显示目的使用表格行是表格滥用！
回答by Barry Kaye
Try this:
尝试这个：
<td bgcolor="#FFFFFF" style="line-height:10px;" colspan=3> </td>
回答by Alwin G
I know this question already has an answer, but I found out an even simpler way of doing this.
我知道这个问题已经有了答案，但我发现了一种更简单的方法。
Just add
只需添加
<tr height = 20px></tr>
Into the table where you want to have an empty row. It works fine in my program and it's probably the quickest solution possible.
进入你想要有空行的表。它在我的程序中运行良好，可能是最快的解决方案。
回答by Kim Homann
This one works for me:
这个对我有用：
<tr style="height: 15px;"/>
回答by Vikasdeep Singh
I wanted to achieve the same as asked in this question but accepted answer did not work for me in May, 2018(maybe answer is too old or some other reason). I am using bootsrap 3.3.7and ionic v1.
You need to set line-heightto do set height of specific row.
我想达到与此问题相同的要求，但接受的答案对我不起作用May, 2018（也许答案太旧或其他原因）。我正在使用bootsrap 3.3.7和ionic v1。您需要设置line-height以设置特定行的高度。
.blank_row {
line-height: 3px;
}<table class="action_table">
<tbody>
<tr class="header_row">
<td>Header Item</td>
<td>Header Item 2</td>
<td>Header Item 3</td>
</tr>
<tr class="blank_row">
<td bgcolor="#000" colspan="3"> </td>
</tr>
<tr class="data_row">
<td>Data Item</td>
<td>Data Item 2</td>
<td>Data Item 3</td>
</tr>
</tbody>
</table>回答by Saeta Negra
I couldn't get anything to work until I tried this simple line:
在尝试以下简单行之前，我无法进行任何工作：
<p style="margin-top:0; margin-bottom:0; line-height:.5"><br /></p>
which allows you to vary a filler line height to your hearts content (I was [probably MISusing Table to get three columns (boxes) of text which I then wanted to line up along the bottom)
这允许你根据你的心内容改变填充行的高度（我[可能是误用表格来获得三列（框）文本，然后我想沿着底部排列）
I'm an amateur so would appreciate comments
我是业余爱好者，所以希望得到评论
