build/empty-table-cells/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

<!doctype html>
<html lang="en" id="top">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="icon" href="data:,">
	<title>Styling Empty Table Cells</title>
	<link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" />
	<style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style>
</head>

<nav>
  <a href="#menu">Menu &darr;</a>
</nav>

<main>
<h1>Styling Empty Table Cells</h1>
<p>2019-07-17</p>
<p>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.</p>
<h2>The easy <code>:empty</code> way</h2>
<p>The most popular way to target <em>any</em> empty element is by using - you guessed it - the <code>empty</code> pseudo-class. This pseudo-class is incredibly simple. You target an element's <code>empty</code> state that same way you would target <code>hover</code> or <code>active</code>:</p>
<pre><code>table tr td:empty {
    opacity: 0;
}
</code></pre>
<p>Check out the CodePen examples below for more advanced styling options:</p>
<p><a href="https://codepen.io/bradleytaunt/pen/EBBLEx/">Live CodePen Example 1</a></p>
<p>You can also include additional pseudo elements to give the user more context about what the empty cells represent:</p>
<p><a href="https://codepen.io/bradleytaunt/pen/bPXqLa/">Live CodePen Example 2</a></p>
<h2>More specific <code>empty-cells</code> property</h2>
<p>Although using the <code>:empty</code> 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 <em>just</em> table cells? </p>
<p>Let's take a look at the <code>empty-cells</code> property:</p>
<pre><code>table {
    empty-cells: hide;
}
</code></pre>
<p><a href="https://codepen.io/bradleytaunt/pen/XLLqOW/">Live CodePen Example 3</a></p>
<p>Pros of using <code>empty-cells</code>:</p>
<ul>
<li>Only one CSS property</li>
<li>Targets the table elements specifically</li>
<li>No need for custom styles since it simply <em>hides</em> empty cell borders</li>
</ul>
<p>Some downsides to using this property:</p>
<ul>
<li>No styling customization</li>
<li>Trickier to use pseudo-element helpers without invoking the <code>:empty</code> state</li>
</ul>
<h2>Pick your preference</h2>
<p>It doesn't matter semantically which option you decide to take when styling / hiding empty table cells. Using the <code>:empty</code> state gives you a lot more flexibility in terms of what you can target (full rows, columns etc), but using the <code>empty-cells</code> property let's you simply hide the cells and focus on more important items.</p>
<footer role="contentinfo">
    <h2>Menu Navigation</h2>
    <ul id="menu">
        <li><a href="/">Home</a></li>
        <li><a href="/projects">Projects</a></li>
        <li><a href="/uses">Uses</a></li>
        <li><a href="/wiki">Wiki</a></li>
        <li><a href="/resume">Resume</a></li>
        <li><a href="/colophon">Colophon</a></li>
        <li><a href="/now">Now</a></li>
        <li><a href="/donate">Donate</a></li>
        <li><a href="/atom.xml">RSS</a></li>
        <li><a href="#top">&uarr; Top of the page</a></li>
    </ul>
    <small>
        Built with <a href="https://git.sr.ht/~bt/barf">barf</a>. <br>
        Maintained with ♥ for the web. <br>
        Proud supporter of <a href="https://usefathom.com/ref/DKHJVX">Fathom</a> &amp; <a href="https://nextdns.io/?from=74d3p3h8">NextDNS</a>. <br>
        The content for this site is <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>.<br> The <a href="https://git.sr.ht/~bt/bt.ht">code for this site</a> is <a href="https://git.sr.ht/~bt/bt.ht/tree/master/item/LICENSE">MIT</a>.
    </small>
</footer>