Html 如果所有单元格都为空,是否会显示表格行?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/919747/
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
Will a table row be displayed if all its cells are empty?
提问by User
I have an empty table row just for separation between rows.
我有一个空表行只是为了行之间的分隔。
<tr>
<td colspan="5"></td>
</tr>
It's rendered in IE, FF, Opera and Safari. The question is, whether I should put some content inside of it or it is okay to leave it as it is?
它在 IE、FF、Opera 和 Safari 中呈现。问题是,我是应该在其中放入一些内容还是可以保持原样?
Like:
喜欢:
<tr>
<td colspan="5"> </td>
</tr>
回答by Lennart Koopmann
Well you could put an
as column content to make sure the rows are displayed. The better way is to use CSS for spacing though.
好吧,您可以放置一个
as 列内容以确保显示行。更好的方法是使用 CSS 作为间距。
回答by Jason Musgrove
Semantically, does the empty row serve a purpose, or is it purely for layout? If the latter, it may be worth considering dropping the empty row, and providing the separation via CSS. E.g.
从语义上讲,空行是有用途的,还是纯粹是为了布局?如果是后者,可能值得考虑删除空行,并通过 CSS 提供分隔。例如
<tr class="separate-below">
<td>Data before separater</td><td>More Data</td>...
</tr>
<tr>
<td>Data after separater</td><td>More Data</td>...
</tr>
With the following in the stylesheet:
在样式表中包含以下内容:
TR.separate-below TD,TR.separate-below TH {
border-bottom: 1em solid white; /* use the background colour of a cell here */
}
Alternatively, you can use multiple <tbody> elements to group blocks of rows together (adding rules="groups" to the table element causes <tbody> elements to gain a horizontal border at top and bottom, and <colgroup> element to gain a border to their left and right):
或者,您可以使用多个 <tbody> 元素将行块组合在一起(将 rules="groups" 添加到 table 元素会导致 <tbody> 元素在顶部和底部获得水平边框,而 <colgroup> 元素将获得一个边框的左右):
<table rules="groups">
<thead>
<tr><th>Header</th><th>Header</th>...</tr>
</thead>
<tbody>
<tr><td>Data</td><td>Data</td>...</tr>
<tr><td>Data</td><td>Data</td>...</tr>
...
</tbody>
<tbody>
<tr><td>Data</td><td>Data</td>...</tr>
...
</tbody>
...
</table>
回答by Jo?o Guilherme
As you can see in this examplefrom W3Schools using the
is the best way to do what you want.
正如您在W3Schools 的这个示例中所看到的,使用
is the best way to do what you want。
回答by knittl
if you want to put content inside, i would use a no-breaking-space:
, rather than a normal blank
如果你想把内容放在里面,我会使用一个不间断空格:
,而不是一个普通的空白
回答by Dariusz Sikorski
This is a very old question, but if somebody still needs a solution (problem exists with display: table-cell
or table-row elements
)
这是一个非常古老的问题,但如果有人仍然需要解决方案(问题存在于display: table-cell
或table-row elements
)
here's the solution:
这是解决方案:
.emptyElement:after{
content: "td:empty:after, th:empty:after {
content: "table { empty-cells:show; }
a0";
}
a0";
}
回答by Jason Foglia
I wanted to add my solution which is a modification of @Dariusz Sikorski solution.
我想添加我的解决方案,这是对@Dariusz Sikorski 解决方案的修改。
##代码##回答by Karl
You may have already tried this but if your trying to add some space in between rows have you tried adding some padding.
您可能已经尝试过这个,但是如果您尝试在行之间添加一些空间,您是否尝试过添加一些填充。
CELLSPACING=Length (spacing between cells)
CELLSPACING=长度(单元格之间的间距)
CELLPADDING=Length (spacing within cells)
CELLPADDING=长度(单元格内的间距)
Karl
卡尔
回答by Jon Winstanley
To ensure that empty cells are displayed the following CSS can be used:
为了确保显示空单元格,可以使用以下 CSS:
##代码##回答by Paul Kozlovitch
You can use multiple tbody
tags to group table rows. It's totally valid and more semantic.
您可以使用多个tbody
标签对表格行进行分组。它完全有效且更具语义。