使用 HTML 或 CSS 更改 TD 边框颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19183674/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change TD border color with HTML or CSS
提问by Alvaro Parra
I have a little trouble with changing one trborder color
My table is something like this
我在更改一种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>
I would like first <tr><td></td><td></td></tr>to be white and the second one to be blue
I have tried with
我想第一个<tr><td></td><td></td></tr>是白色的，第二个是我试过的蓝色
#one td, #one tr,#onetable{
border: 1px solid white;
border-color:#ff0000;
But it didn't work Any idea Ty
但它没有用 任何想法 Ty
回答by Ravi Chauhan
<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>
回答by Irfan TahirKheli
<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>
回答by jenson-button-event
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>
(btw #0000FFis blue)
（顺便说一句#0000FF是蓝色的）
回答by David says reinstate Monica
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;
}
Note that, if you want two cells in the first row, and three in the second, you should use the colspanattribute in your HTML (on either the first, or, as in the demo below, the second tdelement):
请注意，如果您希望第一行中有两个单元格，第二行中有三个单元格，您应该colspan在 HTML 中使用该属性（在第一个td元素上，或者，如下面的演示中，第二个元素）：
<table>
<tr>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
References:
参考：
回答by user2320601
CSS
CSS
table{
background:#000;
}
tr#one{
background:blue;
}
tr#two{
background:red;
}
tr td{
background: inherit;
}
HTML
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>
