Change TD border color with HTML or CSS

Question

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

Possible duplicate: http://stackoverflow.com/questions/670424/border-around-specific-rows-in-a-table — christopher, Oct 04 '13 at 14:25
also why are you specifying border color as white in one line and red in next? Was that some trial? — Harry, Oct 04 '13 at 14:26

score 27 · Accepted Answer · answered Feb 17 '15 at 13:58

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

score 9 · Answer 2 · edited Feb 17 '15 at 13:56

9

<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/

edited Feb 17 '15 at 13:56

informatik01

16,038
10
74
104

answered Oct 04 '13 at 14:28

Irfan TahirKheli

3,652
1
22
36

jenson-button-event · Answer 3 · 2013-10-04T14:36:32.713

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)

David Thomas · Answer 4 · 2013-10-04T14:46:02.863

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:

score 1 · Answer 5 · answered Oct 04 '13 at 14:38

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>

Change TD border color with HTML or CSS

5 Answers5

Linked

Related