CODEWITHSUNDEEP
htmlcss
vrepsys
vrepsys

Reputation: 2213

Why html table cell's border color does not change?

How can I make left border of the cell red? Why this does not work? Thanks!!

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.main-table {
    border-collapse: collapse;
}
.main-table td {
    margin: 0px;
    padding: 0px;
    border: 1px solid #aaa;
    padding: 1px 4px 1px 4px;
}
.left-border {
border-left: 1px solid red !important;
}
</style>
</head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

Shouldn't left-border override the color specified on .main-table td?

<table class='main-table' cellspacing='0' cellpadding='0'>
<tr>
    <td> 1 </td>
    <td> 366 </td>
</tr>
<tr>
    <td > 2 </td>
    <td class='left-border'> 777 </td>
</tr>
</table>

</body>
</html>

Upvotes: 20

Views: 24310

Answers (7)

Mr.T.K
Mr.T.K

Reputation: 2356

another solution,

http://jsfiddle.net/yPSVg/

.main-table {
    border-collapse: collapse;
}
.main-table td {
    margin: 0px;
    padding: 0px;
    border: 1px solid #aaa;
    padding: 1px 4px 1px 4px;
}
.left-border {
    border-left: 1px solid red !important;
}
.right-border {
    border-right: 1px solid red !important;
}
<table class='main-table' cellspacing='0' cellpadding='0'>
  <tr>
      <td> 1 </td>
      <td> 366 </td>
  </tr>
  <tr>
      <td class="right-border"> 2 </td>
      <td class='left-border'> 777 </td>
  </tr>
</table>

Upvotes: 0

BilalKat
BilalKat

Reputation: 34

I would go with anglimass, but with one change to the css:

td.left-border {
border-left: 1px double red !important;
}

That is, the selector should have the additional "td"

(Edited the 2px border to 1px - that was a mistake!)

Upvotes: 1

Brian Rogers
Brian Rogers

Reputation: 129697

Hmmm. It almost seems like this depends on the order in which the cell borders are drawn by the browser. I tried the above in IE8 and it looked fine, but didn't work in FF or Chrome.

Then I tried making the right border of the left cell red instead, using the exact same markup. This time it didn't work in IE but did work in FF and Chrome.

If you make both the left border of the right cell red and the right border of the left cell red, it works in all of them.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.main-table
{
    border-collapse: collapse;
}
.main-table td
{
    margin: 0px;
    padding: 0px;
    border: 1px solid #aaa;
    padding: 1px 4px 1px 4px;
}
.right-border
{
    border-right: 1px solid red !important;
}
.left-border
{
    border-left: 1px solid red !important;
}
</style>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
    <table class='main-table' cellspacing='0' cellpadding='0'>
        <tr>
            <td> 1 </td>
            <td> 366 </td>
        </tr>
        <tr>
            <td class='right-border'> 2 </td>
            <td class='left-border'> 777 </td>
        </tr>
    </table>
</body>
</html>

Upvotes: 1

anglimasS
anglimasS

Reputation: 1344

Try this,

.main-table {
    border-collapse: collapse;
}
.left-border {
border-left: 2px solid red !important;
}

Upvotes: 2

techfoobar
techfoobar

Reputation: 66663

In CSS the selector that is most specific takes precedence over the lesser specific ones. For example, in your case .main-table td takes precedence over .left-border since the former is more specific. To solve it, you can specify: .main-table td.left-border for the border override. This is more correct and better than using !important which eliminates all chances of overriding it further.

See this link for info on CSS selector precedence: http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/

Upvotes: 1

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324640

Set the border to 1px double red. A 1px-wide "double" border looks identical to a "solid", but has higher precedence in collapsed border computation.

Upvotes: 39

styfle
styfle

Reputation: 24610

The collapse value means borders are collapsed into a single border when possible. You want to use separate for the border-collapse property.

Also, You have two closing </head> tags.

Upvotes: -1

Related Questions