📌  相关文章
📜  HTML | DOM 样式 emptyCells 属性(1)

📅  最后修改于: 2023-12-03 14:41:50.044000             🧑  作者: Mango

HTML | DOM 样式 emptyCells 属性

HTML 的表格元素有许多可供调节的样式，其中之一为 emptyCells 属性。emptyCells 属性用于定义表格是否显示空单元（单元格中没有内容的情况），它有以下两个可选值：

  • show：默认值。显示空单元格的边框。
  • hide：不显示空单元格的边框。

emptyCells 的类型为字符串，可以应用在 <table> 元素上，也可以应用在 <td>, <th>, <tbody>, <thead>, <tfoot>, <col>, 和 <colgroup> 元素上（在这些元素上应用，其作用等价于应用到包含它们的 <table> 元素上）。

代码示例
<!DOCTYPE html>
<html>
<head>
	<title>Empty Cells Demo</title>
	<style>
		table {
			border-collapse: collapse;
		}
		th, td {
			border: 1px solid black;
			padding: 5px;
		}
	</style>
</head>
<body>
	<h1>Empty Cells Demo</h1>
	<p>默认情况下，表格中的空单元格会显示其边框：</p>
    <table>
    	<tr>
    		<th>Month</th>
    		<th>Savings</th>
    	</tr>
    	<tr>
    		<td>January</td>
    		<td>$100</td>
    	</tr>
    	<tr>
    		<td>February</td>
    		<td></td>
    	</tr>
    </table>
    <p>将 emptyCells 属性设置为 "hide"：</p>
    <table emptyCells="hide">
    	<tr>
    		<th>Month</th>
    		<th>Savings</th>
    	</tr>
    	<tr>
    		<td>January</td>
    		<td>$100</td>
    	</tr>
    	<tr>
    		<td>February</td>
    		<td></td>
    	</tr>
    </table>
</body>
</html>
效果展示

emptyCells 属性效果展示

总结
  • emptyCells 属性用于定义表格是否显示空单元格的边框。
  • emptyCells 属性有两个可选值："show" 和 "hide"。
  • emptyCells 属性可以应用在 <table>, <td>, <th>, <tbody>, <thead>, <tfoot>, <col>, 和 <colgroup> 元素上。
  • emptyCells 属性必须是一个字符串类型。