15

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 Any idea Ty

4

5 回答 5

24 
<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>
于 2015-02-17T13:58:48.803 回答
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/

于 2013-10-04T14:28:43.240 回答
5

干得好

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

和一把小提琴

（顺便说一句#0000FF是蓝色的）

于 2013-10-04T14:28:54.300 回答
2

如果你想对你的桌子进行斑马条纹处理：

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 小提琴演示。

请注意，如果您希望第一行有两个单元格，第二行有三个单元格，则应colspan在 HTML 中使用该属性（在第一个元素上，或者如下面的演示中的第二个td元素）：

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

JS 小提琴演示。

参考：

于 2013-10-04T14:39:16.367 回答
1

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>
于 2013-10-04T14:38:49.147 回答