Getting an empty table cell to behave like one with content

Question

I am currently having an issue when a table cell contains no content, the formatting is thrown off and despite trying various techniques am unable to get it to display inline in the same way as ones with content do.

    <ul class="uk-wizard-progress">
        <li class="uk-complete">Welcome</li>
        <li class="uk-active"></li>
        <li>Source</li>
    </ul>

Example: http://codepen.io/nblackburn/pen/MKRVXa

I need to support both populated and unpopulated table cells but would like to tackle this with only CSS if it is at all possible.

Thanks in advance.

So what are you expecting it to do? It's not clear to me how this should look. — Paulie_D, Feb 18 '16 at 19:50
The goal is to get the one without content inline with the others as it currently appears out of place. — nblackburn, Feb 18 '16 at 19:54

Scott Marcus · Answer 1 · 2016-02-18T20:17:50.493

0

li::after { content:"\00a0"; }

edited Feb 18 '16 at 20:17

answered Feb 18 '16 at 20:05

Scott Marcus

64,069
6
49
71

1

This will not work. You're using wrong unicode. In CSS you must use escaped unicode. – Viktor Feb 18 '16 at 20:16
1

Thanks. I still think you should make that ::after instead of adding it to the ::before so li's with content don't lead off with a space. – Scott Marcus Feb 18 '16 at 20:18

score 0 · Accepted Answer · edited May 23 '17 at 11:45

0

Just change your content in li:before to '\00a0' like so:

li:before {
  height: 10px;
  display: block;
  margin-top: 5px;
  content: '\00a0';
  background: #dddddd;
  margin-bottom: 10px;
  transition: all 0.3s ease-in-out;
}

Or add content: '\0020' to li:after as Scott Marcus suggested. This will prevent an appearance of extra space before your table cell content:

li:after {
 content: '\0020';
 /* ... */
}

This is actually a best practice.

Source: Add a space (" ") after an element using :after

edited May 23 '17 at 11:45

Community

1
1

answered Feb 18 '16 at 20:08

Viktor

4,218
4
32
63

I'd make that li::after so li's that have content won't be indented. – Scott Marcus Feb 18 '16 at 20:11
Thanks, i was close but was using the wrong unicode character. – nblackburn Feb 18 '16 at 20:12

Getting an empty table cell to behave like one with content

2 Answers2