Tutorials


CSS empty-cells property


The empty-cells property in CSS is used to control the display of table cells that have no content. It allows you to specify whether the borders and background of empty table cells should be displayed or not. This property can help in creating cleaner table layouts and improving visual consistency.

Syntax

table {
  empty-cells: value;
}
  • table: The HTML table element to which you want to apply the empty-cells setting.
  • value: The display behavior of empty cells.

Values

  1. show:

    • Description: Displays borders and background for empty cells.
    • Example: empty-cells: show;

  2. hide:

    • Description: Hides borders and background for empty cells. This can be useful for making tables look cleaner when some cells do not contain any content.
    • Example: empty-cells: hide;

Usage Example

Here’s how to use the empty-cells property in CSS:

Example

/* Table with borders and background for empty cells */
table.show-empty {
  empty-cells: show; /* Displays borders and background for empty cells */
  border-collapse: collapse; /* Collapse borders for a cleaner look */
  width: 100%; /* Full width table */
}

th, td {
  border: 1px solid black; /* Apply a border to table cells */
  padding: 8px; /* Add padding to table cells */
}

/* Table with hidden borders and background for empty cells */
table.hide-empty {
  empty-cells: hide; /* Hides borders and background for empty cells */
  border-collapse: collapse; /* Collapse borders for a cleaner look */
  width: 100%; /* Full width table */
}

th, td {
  border: 1px solid black; /* Apply a border to table cells */
  padding: 8px; /* Add padding to table cells */
}

HTML Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Empty Cells Example</title>
  <style>
    /* Include the CSS from the example above here */
  </style>
</head>
<body>
  <h2>Show Empty Cells</h2>
  <table class="show-empty">
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
    <tr>
      <td>Data 1</td>
      <td></td> <!-- Empty cell -->
    </tr>
    <tr>
      <td></td> <!-- Empty cell -->
      <td>Data 2</td>
    </tr>
  </table>

  <h2>Hide Empty Cells</h2>
  <table class="hide-empty">
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
    <tr>
      <td>Data 1</td>
      <td></td> <!-- Empty cell -->
    </tr>
    <tr>
      <td></td> <!-- Empty cell -->
      <td>Data 2</td>
    </tr>
  </table>
</body>
</html>

Explanation:

  1. table.show-empty:

    • Uses empty-cells: show; to display borders and background for cells that are empty. This results in a table where empty cells still have a visible border.

  2. table.hide-empty:

    • Uses empty-cells: hide; to hide borders and background for empty cells. This makes empty cells invisible, which can clean up the appearance of the table when some cells are not used.

Important Points

  1. CSS Property Application:

    • The empty-cells property applies only to the table cells (<td> and <th>) within a <table>. It affects how empty cells are rendered with regard to their borders and backgrounds.

  2. Browser Compatibility:

    • The empty-cells property is well-supported across modern browsers, but it’s always a good practice to test your table designs to ensure consistency across different environments.

  3. Not Inherited:

    • The empty-cells property does not inherit. It only affects the specific table it is applied to and does not propagate to other tables or elements.

  4. Effect on Layout:

    • Hiding empty cells can create a cleaner look but might result in inconsistent cell spacing or alignment if not used carefully.



Next Previous




@aCodeTutorials All Rights Reserved
privacy policy | about