Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Table cell borders do not show

No borders showing

The above image shows my problem - the cells in the image are meant to have a single pixel red border round each of them, yet only one top border is showing.

I have an invalid class for table cells which has the following CSS:

th.invalid, td.invalid {
    border: 1px double #b8202a;
}

Using the Chrome debugger, I can see the class applied to the cell, and I can also see that the layout states that th cell should have the specified border yet it does not consistently have red borders. Increasing the border size or type between double and solid seems to have no effect. Hovering over the cell reveals the borders are there without color.

What am I likely to be doing wrong? :-)

Update: Thanks for your input. The information in this border color with border-collapse is probably relevant to the reason why it has issues.

like image 929
vogomatix Avatar asked Jul 23 '14 10:07

vogomatix


People also ask

Why are my table borders not showing in Word?

Click the Table Tools Layout or Table Layout tab. Click View Gridlines. Gridlines will stay on for all Word documents.

Why is my table border not showing up CSS?

CSS Border Not Showing If you've set the shorthand border property in CSS and the border is not showing, the most likely issue is that you did not define the border style. While the border-width and border-color property values can be omitted, the border-style property must be defined. Otherwise, it will not render.

Why does my border disappear in Excel?

If you apply the borders to cells that will be hidden, then the borders will NOT be visible when the rows or columns are hidden. Even if the adjacent rows or columns are visible, the border will be hidden because it was applied to the cells that are hidden.

How do I turn off table borders?

Table with no outside border. Note: you can use “border: none;” or “border: 0px;”. Either way it results in the outside border being removed from your table.


1 Answers

SOLVED

Hi,

I had the same case while using bootstrap 3.

The issue I found was the bootstrap's css property:

table {    
    border-spacing: 0;
    border-collapse: collapse; /* here is the devil */  
}

I did overwrite it in my own css by:

table,
table td {
    font-weight: bold;
    background-color: #fff;
    border-collapse: separate; /* This line */
}

Then it worked..!

like image 200
Amit Shah Avatar answered Sep 23 '22 18:09

Amit Shah