Search code examples
javascriptcsshtml-tablerowcol

CSS Style First Row and Column

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/

Solution

  • 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.