CODEWITHSUNDEEP
htmlcss
Carlos Miguel Colanta
Carlos Miguel Colanta

Reputation: 2823

Adding background-color on TD made my border disappear

This is how it looked like after adding background-color

enter image description here

For this table , the CSS involved are :

    .styleTable td,th
{
    padding: 10px;
    text-align:left;
    font-size:10pt;
}


.tdColorGrey
{
    background-color:#B8B8B8 ;
    font-weight:bold;
    border:1px;
}

and this is my table style:

 <table class="styleTable" style="width: 80%;background-color:white;" border="1">

The borders appear without tdColorGrey but they disappear once i added it.

Upvotes: 0

Views: 1487

Answers (1)

Mr Lister
Mr Lister

Reputation: 46589

The problem is that 

border:1px;

is a shorthand property, which literally means

border-width:1px; border-style:none; border-color:currentColor;

See description on MDN.
So if you assign the class to any td, it will have a border-style of none instead of inheriting from the table.

So possible solutions, as mentioned in the comments, are

  • write the style explicitly in the css:

    border:1px solid black;

    (whatever style and color you need, that is)

  • or, remove the border property from the css altogether, so that the border will inherit normally!

Upvotes: 1

Related Questions