CSS 属性

CSS 中的empty-cell属性用于控制表格中没有内容或被视为"空"的单元格的呈现。它仅适用于表格和表格单元格。

属性值

  • show: 呈现空单元格的边框。

  • hide: 不绘制空单元格的边框。

适用范围

所有元素显示表格单元格。

DOM 语法

object.style.emptyCell = "hide | show";

示例

这是用于隐藏 <table> 中空单元格边框的空单元格属性元素。

<html>
<head>
<style>
   table.empty {
      width: 350px;
      border-collapse: separate;
      empty-cells: hide;
   }
   table.show {
      width: 350px;
      border-collapse: collapse;
      empty-cells: show;
   }
   td.empty {
      padding:5px;
      border-style:solid;
      border-width:1px;
      border-color:#999999;
   }  
</style>
</head>
<body>
   <div>
      <h2>empty-cell: hide</h2>
      <table class = "empty">
         <tr>
            <th></th>
            <th>Header 1</th>
            <th>Header 2</th>
         </tr>
         <tr>
            <th>Title</th>
            <td class = "empty">Data 1</td>
            <td class = "empty">Data 2</td>
         </tr>
         <tr>
            <th>Title</th>
            <td class = "empty">Data 1</td>
            <td class = "empty"></td>
         </tr>
      </table>
   </div>
   <div>
      <h2>empty-cell: show</h2>
      <table class = "show">
         <tr>
            <th></th>
            <th>Header 1</th>
            <th>Header 2</th>
         </tr>
         <tr>
            <th>Title</th>
            <td class = "empty">Data 1</td>
            <td class = "empty">Data 2</td>
         </tr>
         <tr>
            <th>Title</th>
            <td class = "empty">Data 1</td>
            <td class = "empty"></td>
         </tr>
   </table>
   </div>
</body>
</html>