คุณสมบัติ CSS เซลล์ว่างใช้เพื่อระบุการแสดงเซลล์ว่างของตาราง ไวยากรณ์ของคุณสมบัติ CSS เซลล์ว่างมีดังต่อไปนี้ -
ไวยากรณ์
Selector {
empty-cells: /*value*/
} ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงคุณสมบัติ CSS เซลล์ว่าง -
<!DOCTYPE html>
<html>
<head>
<style>
table, table * {
border: groove;
}
table {
display: inline-block;
}
#demo1 {
empty-cells: show;
}
#demo2 {
empty-cells: hide;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<table id="demo1">
<tr>
<th colspan="3">Demo</th>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
<tr>
<td></td>
<td></td>
<td>Six</td>
</tr>
<tr>
<td></td>
<td>Eight</td>
<td></td>
</tr>
</table>
<table id="demo2">
<tr>
<th colspan="3">Demo</th>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
<tr>
<td></td>
<td></td>
<td>Six</td>
</tr>
<tr>
<td></td>
<td>Eight</td>
<td></td>
</tr>
</table>
</body>
</html> ผลลัพธ์
สิ่งนี้ให้ผลลัพธ์ต่อไปนี้ -
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<style>
table * {
border: ridge skyblue;
padding: 0.5rem;
}
table {
margin: 20px;
display: inline-block;
box-shadow: 0 0 6px 3px green;
}
#demo1 {
empty-cells: hide;
}
#demo2 {
empty-cells: show;
}
</style>
</head>
<body>
<table id="demo1">
<tr>
<th colspan="3">Hide</th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
<table id="demo2">
<tr>
<th colspan="3">Show</th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html> ผลลัพธ์
สิ่งนี้ให้ผลลัพธ์ต่อไปนี้ -
