From dcfb172704f3afb68a30425029ec834be2883274 Mon Sep 17 00:00:00 2001 From: bt Date: Sat, 8 Jun 2024 13:22:19 -0400 Subject: More content porting, on-going markdown changes for lowdown support --- build/empty-table-cells/index.html | 47 +++++++++++++++++++++++++++----------- 1 file changed, 34 insertions(+), 13 deletions(-) (limited to 'build/empty-table-cells') diff --git a/build/empty-table-cells/index.html b/build/empty-table-cells/index.html index 9e15e0e..a5f2a20 100644 --- a/build/empty-table-cells/index.html +++ b/build/empty-table-cells/index.html @@ -1,53 +1,74 @@ - + Styling Empty Table Cells - - + + +
-

Styling Empty Table Cells

+

Styling Empty Table Cells

+

2019-07-17

-

Often when designing tables on the web you're bound to come across empty pockets of data. These will be rendered as "blank" table cells, which isn't always the intended outcome. Let's take a quick look at how to target and style empty table cells.

-

The easy :empty way

-

The most popular way to target any empty element is by using - you guessed it - the empty pseudo-class. This pseudo-class is incredibly simple. You target an element's empty state that same way you would target hover or active:

+ +

Often when designing tables on the web you’re bound to come across empty pockets of data. These will be rendered as “blank” table cells, which isn’t always the intended outcome. Let’s take a quick look at how to target and style empty table cells.

+ +

The easy :empty way

+ +

The most popular way to target any empty element is by using - you guessed it - the empty pseudo-class. This pseudo-class is incredibly simple. You target an element’s empty state that same way you would target hover or active:

+ 
table tr td:empty {
     opacity: 0;
 }
+

Check out the CodePen examples below for more advanced styling options:

+

Live CodePen Example 1

+

You can also include additional pseudo elements to give the user more context about what the empty cells represent:

+

Live CodePen Example 2

-

More specific empty-cells property

-

Although using the :empty pseudo-class can be helpful, it isn't used just for tables. It can be used for any HTML elements that have a lack of content. So, is there a CSS specific property that can target just table cells?

-

Let's take a look at the empty-cells property:

+ +

More specific empty-cells property

+ +

Although using the :empty pseudo-class can be helpful, it isn’t used just for tables. It can be used for any HTML elements that have a lack of content. So, is there a CSS specific property that can target just table cells?

+ +

Let’s take a look at the empty-cells property:

+ 
table {
     empty-cells: hide;
 }
+

Live CodePen Example 3

+

Pros of using empty-cells:

+ +

Some downsides to using this property:

+ -

Pick your preference

-

It doesn't matter semantically which option you decide to take when styling / hiding empty table cells. Using the :empty state gives you a lot more flexibility in terms of what you can target (full rows, columns etc), but using the empty-cells property let's you simply hide the cells and focus on more important items.

+ +

Pick your preference

+ +

It doesn’t matter semantically which option you decide to take when styling / hiding empty table cells. Using the :empty state gives you a lot more flexibility in terms of what you can target (full rows, columns etc), but using the empty-cells property let’s you simply hide the cells and focus on more important items.