2

我可以使用 CSS 属性border-collapse来组合相邻表格单元格的边框。我可以empty-cells用来隐藏没有内容的表格单元格。但是当我同时使用这两个属性时，该empty-cells属性不起作用，并且空单元格始终可见。至少它们每个周围都有一个边框，即使多个相邻的行和列是空的。

这是一个例子：

<!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>

4

2 回答 2

3

正如@Bolt解释为什么会发生这种情况，我将为此提供一个解决方案，您可以在 CSS 中使用以下代码段来隐藏空单元格

th:empty, td:empty {
    border: 0;
}

演示

使用:empty伪，我将元素设置border: 0;为页面上存在的物理元素，我们只针对空单元格的样式并将其设置borders为0.

我没有使用display: none;它，因为它会破坏你的table布局，所以如果你想保持边框折叠，使用上面的代码片段就足够了。

注意：正在使用的选择器是通用选择器，将全局定位，如果您想专门定位元素，请考虑使用 aclass而不是 like

.table_class_name th:empty, 
.table_class_name td:empty { 
    /* Styles goes here */
}
于 2013-09-12T07:51:01.567 回答
-1

这是我发现的一个技巧，您可以单独使用border-collapse。然后在表格中将边框间距定义为 0px，然后将 td 中的填充定义为 0px。

table
{ 
	empty-cells: hide; 
	border-collapse: separate;
	border-spacing: 0px;	
}

td
{	
	border: thin solid black;
	text-align: right; 
	padding: 0px;
}

th 
{	
	border: thin solid black;
	background-color: yellow; 
}

于 2020-02-06T15:08:51.653 回答