10

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.

Community
  • 1
  • 1
vogomatix
  • 4,856
  • 2
  • 23
  • 46
  • Its hard to tell without more code, can you post a self contained example in your question or a jsfiddle.net of the behaviour? – SW4 Jul 23 '14 at 10:13
  • I have a suspicion I won't be able to replicate it in jsFiddle – vogomatix Jul 23 '14 at 10:13
  • Just use the dom inspector from your chrome developer tools (F12) and look which classes overwrite this one... – Daniel Jul 23 '14 at 10:14
  • I have done and it doesn't reveal anything overrwriting it. I have added an image to show the problem – vogomatix Jul 23 '14 at 10:15
  • can you give us som more information about the styling of the table, especially th other cells? – Daniel Jul 23 '14 at 10:19
  • 2
    Have you got (a derivation of): `table { border-collapse: collapse; border-spacing: 0; }` – SW4 Jul 23 '14 at 10:20
  • The cell styling is mainly Bootstrap and Datatables standard – vogomatix Jul 23 '14 at 10:20
  • @SW4 yes - I thought this meant the cell borders just had no separation. If you expand on your question you may have the answer :-) – vogomatix Jul 23 '14 at 10:23
  • 1
    come on, we need details to help you, not vague information... Something Like this http://fiddle.jshell.net/b3wbq/ might have happend. – Daniel Jul 23 '14 at 10:23
  • @vogomatix - not sure I follow? – SW4 Jul 23 '14 at 10:24
  • 1
    I would just try to **!important** it to see if it works or is there still something overwriting it. But as the others before me said, it's hard to answer without knowing if there is something overwriting it or not. – Pepelius Jul 23 '14 at 10:24
  • @SW4 I thought from your border-collapse query that you had an idea what the problem is. – vogomatix Jul 23 '14 at 10:25
  • The fiddle I posted is based on the idea of @SW4. – Daniel Jul 23 '14 at 10:26
  • 4
    Please don't blindly suggest `!important`. It just makes style sheets more confusing and is usually a symptom of badly structured HTML or CSS that should be corrected instead. – RoToRa Jul 23 '14 at 10:27
  • 1
    @Daniel (and SW4): I am sorry I cannot post more information but you guys have given me some leads to look into. Thanks – vogomatix Jul 23 '14 at 10:28
  • The style `double` can't have effect unless the border is at least 3px wide. – RoToRa Jul 23 '14 at 10:29
  • I am not a fan of `!important` either. Checking the effect of `border-collapse` and `spacing` looks more promising – vogomatix Jul 23 '14 at 10:30
  • @RoToRa as I mentioned I tried increasing the border size/style in Chrome debugger. – vogomatix Jul 23 '14 at 10:30
  • @RoTaRa the double styling is an attempt to increase the priority of the style - double takes precedence over solid in some browsers. – vogomatix Jul 24 '14 at 08:34

3 Answers3

6

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..!

Amit Shah
  • 7,771
  • 5
  • 39
  • 55
1

You probably have some bug in CSS, here's a quick example FIDDLE

<table>
  <tr>
    <th class="invalid">Text</th>
    <th>Text</th>
    <th>Text</th>
    <th>Text</th>
    <th>Text</th>
  </tr>
  <tr>
    <td class="invalid">Text</td>
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
  </tr>
</table>

table,
th,
td {
  border: 1px solid #666;
  border-collapse: collapse;
}
th.invalid,
td.invalid {
  border: 1px double #b8202a;
}

but if you want single pixel border maybe you should use

th.invalid,
td.invalid {
  border: 1px solid #b8202a;
}
Milan and Friends
  • 5,560
  • 1
  • 20
  • 28
  • As mentioned, I've tried combinations of border widths and types. Your jsfiddle renders fine in my browser, but I can see that it is possible the browser may have issues if border-collapse is in effect and I'll look into that. Thanks – vogomatix Jul 23 '14 at 10:35
-1

try add !important below code 

th.invalid, td.invalid {
border: 1px double #b8202a !important;
}
table.invalid
 border: 1px double #b8202a !important; 
}
tr.invalid
{
border: 1px double #b8202a !important;
}

See the below link for Fiddle

Thanks Maha

user3820621
  • 337
  • 1
  • 3
  • 14
  • 2
    Or you could, you know - add more CSS specificity and not use the !important tag. Sigh. – wildandjam Jul 23 '14 at 10:41
  • Agreed I don't like using `!important` either. However, it is perhaps useful in finding out if the issue resolves itself by its use – vogomatix Jul 23 '14 at 10:45