logo标签列表

使用HTML或CSS更改TD边框颜色

htmlcss
16

我在更改一个 tr 的边框颜色方面遇到了一些小麻烦。 我的表格大致如下：

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

我希望第一个 <tr><td></td><td></td></tr> 是白色的，第二个是蓝色的

我已经尝试了

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

但是它没有起作用

12
哎呀，在table和tr之间有一个div是不合法的HTML。 - jenson-button-event
可能重复：https://dev59.com/zXRB5IYBdhLWcg3wSVe1 - christopher
为什么你在一行中将边框颜色指定为白色，然后又在下一行中指定为红色？那是一个试验吗？ - Harry
5个回答
27
<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>
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/

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 是代表蓝色的)

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 Fiddle演示。

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

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

JS Fiddle演示。

参考资料：

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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接