CSS CSS Tutorial CSS Advanced CSS Responsive Web Design(RWD) CSS Grid CSS Properties Sass Tutorial Sass Functions



empty-cells

The empty-cells property is a CSS property that is used to control the display of empty cells in a table. It is used to specify whether or not to show borders and background colors for empty cells in a table. This property is used to improve the readability and appearance of tables on a web page.

The empty-cells property can have two values: show and hide. The default value is show, which means that empty cells will be displayed with borders and background colors. If the value is set to hide, empty cells will not be displayed with borders and background colors.

Examples

Let's take a look at some examples to understand how the empty-cells property works:

Example 1: Show Empty Cells

In this example, we have a table with some empty cells. The empty-cells property is set to show, which means that empty cells will be displayed with borders and background colors:

  
    <table style="border-collapse: collapse; width: 100%;">
      <tr>
        <td>1</td>
        <td>2</td>
        <td></td>
        <td>4</td>
      </tr>
      <tr>
        <td>5</td>
        <td></td>
        <td>7</td>
        <td>8</td>
      </tr>
    </table>
  
1 2 4
5 7 8

Example 2: Hide Empty Cells

In this example, we have the same table as in Example 1, but the empty-cells property is set to hide, which means that empty cells will not be displayed with borders and background colors:

  
    <table style="border-collapse: collapse; width: 100%; empty-cells: hide;">
      <tr>
        <td>1</td>
        <td>2</td>
        <td></td>
        <td>4</td>
      </tr>
      <tr>
        <td>5</td>
        <td></td>
        <td>7</td>
        <td>8</td>
      </tr>
    </table>
  
1 2 4
5 7 8

Conclusion

The empty-cells property is a useful CSS property that can be used to control the display of empty cells in a table. By setting the value to show, empty cells can be displayed with borders and background colors, which can improve the readability and appearance of tables on a web page. On the other hand, by setting the value to hide, empty cells can be hidden, which can be useful in certain situations where empty cells are not needed.

References

Activity