user3186578 user3186578 - 11 days ago 4
CSS Question

css table border with multiple tables

So I have two tables in one page. I want to border around one of them and no border on the other one. So I am using the id="". But it is still putting borders around both tables and I am not sure why. If I change table1 for no border, it will take away the border on both tables. Please give me any helpful link or advice. Thanks.



table
{
border-collapse: collapse;
}

#table1 td, tr
{
text-align:center;
border: 1px solid black;
}

#table1 th
{
background: orange;
}

#table2
{
margin:auto;
}

<table id = "table1">
<th> Header </th>
<tr>
<td>row 1</td>
</tr>
</table>

<table id = "table2">
<th> Header </th>
<tr>
<td>row 1</td>
</tr>
</table>




Answer

You have to change your selector at #table1 td, tr. #table1 td will apply to all tr in #table1, but tr will apply for all tr.

So set it to #table1 td, #table1 tr and it works.

#table1 td, #table1 tr
{
   text-align:center;
   border: 1px solid black;
}

Example

Comments