Css to Make an Empty Cell'S Border Appear

CSS to make an empty cell's border appear?

If I recall, the cell dosn't exist in some IE's unless it's filled with something...

If you can put a   (non-breaking space) to fill the void, that will usually work. Or do you require a pure CSS solution?

Apparently, IE8 shows the cells by default, and you have to hide it with empty-cells:hide But it doesn't work at all in IE7 (which hides by default).

Table row with empty cells does not display border

I played around with the code and found a work around/solution.

In my table, I just added another empty cell with  .

Original <tbody>:

<tbody id="@wb.WorkBookId _ErrorVisits">
        <tr><td></td><td></td><td></td><td></td></tr>
        <tr style="border-top: 2px solid black; border-left: 2px solid black; border-right: 2px solid black"><td><input type="checkbox" id="@wb.WorkBookId _ErrorCheckbox"/></td><td><b>Visits in Error</b></td><td> </td><td style="border-right: 2px solid black"> </td></tr>
    </tbody>

New <tbody>:

<tbody id="@wb.WorkBookId _ErrorVisits">
        <tr><td></td><td></td><td></td><td></td></tr>
        <tr style="border-top: 2px solid black; border-left: 2px solid black; border-right: 2px solid black"><td><input type="checkbox" id="@wb.WorkBookId _ErrorCheckbox"/></td><td><b>Visits in Error</b></td><td> </td><td> </td><td style="border-right: 2px solid black"> </td></tr>
    </tbody>

Probably not the best solution but it works for now.

CSS Trick to show border on table and cells when cells are not empty and show no border otherwise

See the empty-cells CSS property.

How do I highlight table cell borders when empty?

Looks like the border is not fully visible because covered by other cells' border.

A quick solution I suggest is to use the outline property instead of the border to highlight cells:

.table.submitted td.ng-invalid {
    outline: 1px solid red;
    outline-offset: -1px;
}

Or you can simply make the border wider, to cover other cells' border, but I think this is not the best way:

border: solid 3px red;

Hope this helps you getting the desired result!

border-collapse and empty-cells doesn't work properly together

You can add

background:transparent;

to

th:empty, td:empty {
    border: 0;
}

The reason the hidden cells don't show through is mentioned in the W3.org spec. Border-collapse ignores the fact that the th or td was hidden. Basically, by you collapsing the borders, you are causing the empty-cells:hide to be ignored -- and therefore the normal background of the th and td are being shown.
http://www.w3.org/TR/CSS2/tables.html#propdef-empty-cells

When using border-collapse, W3 Schools says: borders are collapsed into a single border when possible (border-spacing and empty-cells properties will be ignored) http://www.w3schools.com/cssref/pr_border-collapse.asp Or read the spec from W3.org here: http://w3.org/TR/CSS2/tables.html#img-tbl-empty

Why an empty cell doesn't show its border?

From W3C website, link: http://www.w3.org/TR/REC-html32.html

Tables are commonly rendered in bas-relief, raised up with the outer border as a bevel, and individual cells inset into this raised surface. Borders around individual cells are only drawn if the cell has explicit content. White space doesn't count for this purpose with the exception of  .

Hope that answers your query. In general, do not leave any div, span or td empty, put   and use CSS to set font size and heights to cover up height related issues.

Why do the CSS property border-collapse and empty-cells conflict?

As @Bolt explained why this happens, I will provide a solution for this, you can use the below snippet in your CSS to hide the empty cells

th:empty, td:empty {
    border: 0;
}

Demo

Using :empty pseudo, I set the border: 0; so physically the element is present on the page, we just target the styles of the empty cells and set the borders to 0.

I didn't used display: none; as it will spoil your table layout, so using the above snippet is enough if you want to keep the border collapsed.

Note: The selector am using is a general selector and will target globally, if you want to target the element specifically, consider using a class instead like

.table_class_name th:empty, 
.table_class_name td:empty { 
    /* Styles goes here */
}

---

Related Topics