CSS Style First Row and Column

2289 views javascript

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;

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


answered question

2 Answers


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

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

posted this

Have an answer?


Please login first before posting an answer.