为什么CSS属性边框折叠和空单元格冲突？ [英] Why do the CSS property border-collapse and empty-cells conflict?
问题描述
我可以使用CSS属性 border-collapse 来组合相邻表格单元格的边框。我可以使用 empty-cells 隐藏没有内容的表单元格。但是当我使用这两个时， empty-cells 属性没有效果，空单元格总是可见的。
这里有一个例子：
b
如 @Bolt 解释了为什么会发生这种情况，我将为您提供一个解决方案，您可以使用您的CSS中的以下代码段隐藏空单元格
th：empty，td：empty {
border：0 ;
}
使用：empty pseudo ，我设置 border：0; 所以物理上元素出现在页面上，我们只是定位空单元格的样式，并设置 c> 到 0 。
：none; ，因为它会破坏您的表布局，因此如果您想保持边框折叠，使用上述代码段就足够了。
注意：使用的选择器是一个通用选择器，并且将全局定向，如果你想特定的元素，考虑使用类代替
.table_class_name th：empty，
.table_class_name td：empty {
/ *样式在这里* /
}
I can use the CSS property border-collapse to combine the borders of adjacent table cells. And I can use empty-cells to hide table cells that have no content. But when I use both, the empty-cells property has no effect and empty cells are always visible. At least there's a border around each of them, even where multiple adjacent rows and columns are empty.
Here's an example:
<!doctype html>
<html>
<head>
<style>
table
{
border-collapse: collapse;
border-spacing: 0;
}
th,
td
{
empty-cells: hide;
border: solid 1px black;
padding: 2px 4px;
}
</style>
</head>
<body>
<table>
<tr>
<th></th>
<th></th>
<th>Header 3</th>
</tr>
<tr>
<th></th>
<th></th>
<th>Header 3</th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td></td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td></td>
</tr>
</table>
</body>
</html>
As @Bolt explained why this happens, I will provide a solution for this, you can use the below snippet in your CSS to hide the empty cells
th:empty, td:empty {
border: 0;
}
Using :empty pseudo, I set the border: 0; so physically the element is present on the page, we just target the styles of the empty cells and set the borders to 0.
I didn't used display: none; as it will spoil your table layout, so using the above snippet is enough if you want to keep the border collapsed.
Note: The selector am using is a general selector and will target globally, if you want to target the element specifically, consider using a class instead like
.table_class_name th:empty,
.table_class_name td:empty {
/* Styles goes here */
}
这篇关于为什么CSS属性边框折叠和空单元格冲突？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
