CSS - empty-cells 屬性



CSS empty-cells 屬性用於控制表格中沒有內容或被認為是“空”的單元格的渲染方式。它僅適用於表格和表格單元格。

語法

empty-cells: show | hide | initial | inherit;

屬性值

描述
show 在空單元格上顯示邊框。預設值。
hide 在空單元格上隱藏邊框。
initial 將屬性設定為其預設值。
inherit 從父元素繼承該屬性。

CSS 空單元格屬性示例

以下示例說明了使用不同值的 empty-cells 屬性。

帶有邊框的空表格單元格

要使表格的空單元格具有邊框,我們使用 show 值,它是預設值。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      table {
         padding: 4px;
         empty-cells: show;
      }
   </style>
</head>

<body>
   <h2>
      CSS empty-cells property
   </h2>
   <h4>
      empty-cell: show ( see the places 
      without values have borders)
   </h4>
   <table border=1 cellpadding=30>
      <tr>
         <td>
            1
         </td>
         <td>
            2
         </td>
         <td>
         </td>
      </tr>
      <tr>
         <td>
            4
         </td>
         <td>
         </td>
         <td>
            6
         </td>
      </tr>
      <tr>
         <td>
         </td>
         <td>
            8
         </td>
         <td>
            9
         </td>
      </tr>
   </table>

</body>

</html>

沒有邊框的空表格單元格

要使表格的空單元格不具有邊框,我們使用 hide 值。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      table {
         padding: 4px;
         empty-cells: hide;
      }
   </style>
</head>

<body>
   <h2>
      CSS empty-cells property
   </h2>
   <h4>
      empty-cell: hide ( see the places without
      values do not have borders)
   </h4>
   <table border=1 cellpadding=30>
      <tr>
         <td>
            1
         </td>
         <td>
            2
         </td>
         <td>
         </td>
      </tr>
      <tr>
         <td>
            4
         </td>
         <td>
         </td>
         <td>
            6
         </td>
      </tr>
      <tr>
         <td>
         </td>
         <td>
            8
         </td>
         <td>
            9
         </td>
      </tr>
   </table>

</body>

</html>

支援的瀏覽器

屬性 Chrome Edge Firefox Safari Opera
empty-cells 1.0 8.0 1.0 1.2 4.0
css_properties_reference.htm
廣告