CSS Style First Row and Column

2289 views javascript
3

How can I use CSS to make the first row and column of a table not have a border?

I can get the first column to work, but not the first row.

Below is my code:

#tablegrid tr:not(:nth-child(1)), td:not(:nth-child(1)) {
  border: 1px solid black;
  padding:0px;
  margin:0px;
}

<table id="tablegrid">
<TR>
  <TD>row 1 col 1</TD>
  <TD>row 1 col 2</TD>
</TR>
<TR>
  <TD>row 2 col 1</TD>
  <TD>row 2 col 2</TD>
</TR>
</table>

http://jsfiddle.net/1wj6k0ta/

answered question

2 Answers

3

Your selector should be

tr:not(:nth-child(1)) td

That selects every <td> element in every row other than the first row.

If you want all the first cells to not have a border, I'd add a separate rule:

#tablegrid tr td:first-child {
  border-style: none;
}

That should go after the first rule of course.

posted this
4

Use tr:first-child to take the first tr of a table

posted this

Have an answer?

JD

Please login first before posting an answer.