Mudar a cor do contorno TD com HTML ou CSS
Tenho um pequeno problema em mudar uma cor de fronteira.
A minha mesa é algo assim.
<table>
<div id="one">
<tr>
<td></td>
<td></td>
</tr>
</div>
<div id="two">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</div>
</table>
Quero que o primeiro seja branco e o segundo seja azul.
Eu tentei com
#one td, #one tr,#onetable{
border: 1px solid white;
border-color:#ff0000;
Mas não funcionou.
Ideia
Ty
10
Author: avrahamcool, 2013-10-04
5 answers
<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>
11
Author: Ravi Chauhan, 2015-02-17 13:58:48
<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>
6
Author: Irfan TahirKheli, 2015-02-17 13:56:02
Aqui está.
<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 #0000FF
é azul)
2
Author: jenson-button-event, 2013-10-04 14:36:32
Se quiser dar uma risca à sua mesa:
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 que, se você quiser duas células na primeira linha, e três na Segunda, você deve usar o atributo colspan
no seu HTML (no primeiro ou, como na demonstração abaixo, no segundo elemento td
):
<table>
<tr>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Referências:
2
Author: David Thomas, 2013-10-04 14:46:02
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>
1
Author: user2320601, 2013-10-04 14:38:49