CODEWITHSUNDEEP
htmlcss
Alvaro Parra
Alvaro Parra

Reputation: 805

Change TD border color with HTML or CSS

I have a little trouble with changing one tr border color My table is something like this

<table>
    <div id="one">
        <tr>
            <td></td>
            <td></td>
        </tr>
    </div>
    <div id="two">
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </div>
</table>

I would like first <tr><td></td><td></td></tr> to be white and the second one to be blue

I have tried with

#one td, #one tr,#onetable{
border: 1px solid white;  
border-color:#ff0000;

But it didn't work

Upvotes: 17

Views: 127212

Answers (5)

Ravi Chauhan
Ravi Chauhan

Reputation: 1458

<style type="text/css">
    table {
        border-collapse: collapse;
    }
    #one td {
        border: 1px solid #ff0000; 
    }
</style>

<table>
    <tr id="one">
        <td></td>
        <td></td>
    </tr>
    <tr id="two">
        <td></td>
        <td></td>
    </tr>
</table>

Upvotes: 28

Irfan TahirKheli
Irfan TahirKheli

Reputation: 3662

<style type="text/css">
    #one td {
        border: 1px solid #ff0000; 
    }
</style>

<table>
    <tr id="one">
        <td></td>
        <td></td>
    </tr>
    <tr id="two">
        <td></td>
        <td></td>
    </tr>
</table>

http://jsfiddle.net/VCA9Q/

Upvotes: 9

David Thomas
David Thomas

Reputation: 253318

If you want to zebra-stripe your table:

table td {
    border-width: 1px;
    border-style: solid;
}
table tr:nth-child(odd) td {
    border-color: #fff;
}
table tr:nth-child(odd) td {
    border-color: #00f;
}

JS Fiddle demo.

Note that, if you want two cells in the first row, and three in the second, you should use the colspan attribute in your HTML (on either the first, or, as in the demo below, the second td element):

<table>
    <tr>
        <td></td>
        <td colspan="2"></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

JS Fiddle demo.

References:

Upvotes: 2

user2320601
user2320601

Reputation: 162

CSS

table{
    background:#000;
}

tr#one{
    background:blue;
}

tr#two{
    background:red;
}

tr td{
    background: inherit;
}

HTML

  <body>
    <table>
        <tr id='one'>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr id='two'>
            <td>3</td>
            <td>4</td>
        </tr>
    </table>
  </body>

Upvotes: 1

jenson-button-event
jenson-button-event

Reputation: 18951

Here you go

<html>
<head>
<style>
    body {background-color: beige;}
    table {border-collapse: separate;}
    table td { width: 50px; height: 50px;}
    table tr:first-child td {border: 1px solid #fff; }
    table tr:last-child td {border: 1px solid #0000FF; }
</style>
</head>
<body>    
    <table>
    <tr>
      <td></td><td></td><td></td>
    </tr>
    <tr>
      <td></td><td></td><td></td>
    </tr>
    </table>
</body>
</html>

and a fiddle

(btw #0000FF is blue)

Upvotes: 6

Related Questions