CODEWITHSUNDEEP
csshtml-tableborder
frostbyte
frostbyte

Reputation: 157

How to remove TD borders in only first TR in TABLE

I am styling table for my website. I want to have a table where first TR doesn't have border while others TR and their TD's have a border. Code: http://jsfiddle.net/azq6xfnr/ or here:

.table2 {
  border: 1px solid black;
  border-collapse: collapse;
  text-align: center;
}

.table2 .header {
  background-color: #d8ff93;
  color: #126f06;
  border: 0;
}

.table2 td {
  border: 1px solid #53f673;
  padding: 10px;
}

.table2 tr:not(.header):nth-child(odd) {
  background-color: #3cde53;
}
<table class="table2">
  <tr class="header">
    <td>Lp.</td>
    <td>Column 1</td>
    <td>Column 2</td>
  </tr>
  <tr>
    <td>1</td>
    <td>Row 1</td>
    <td>Row 1</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Row 2</td>
    <td>Row 2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Row 3</td>
    <td>Row 3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>Row 4</td>
    <td>Row 4</td>
  </tr>
  <tr>
    <td>5</td>
    <td>Row 5</td>
    <td>Row 5</td>
  </tr>
</table>

Upvotes: 3

Views: 16781

Answers (4)

Pugazh
Pugazh

Reputation: 9561

Use the CSS first-child selector. Here is a fiddle http://jsfiddle.net/r8p061hs/ or http://jsfiddle.net/r8p061hs/1/

.table2 {
  border: 1px solid black;
  border-collapse: collapse;
  text-align: center;
}

.table2 .header {
  background-color: #d8ff93;
  color: #126f06;
  border: 0;
}

.table2 td {
  border: 1px solid #53f673;
  padding: 10px;
}

.table2 tr:not(.header):nth-child(odd) {
  background-color: #3cde53;
}

.table2 tr:first-child {
  border: 1px solid #53f673;
}

.table2 tr:first-child td {
  border: none;
}
<table class="table2">
  <tr class="header">
    <td>Lp.</td>
    <td>Column 1</td>
    <td>Column 2</td>
  </tr>
  <tr>
    <td>1</td>
    <td>Row 1</td>
    <td>Row 1</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Row 2</td>
    <td>Row 2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Row 3</td>
    <td>Row 3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>Row 4</td>
    <td>Row 4</td>
  </tr>
  <tr>
    <td>5</td>
    <td>Row 5</td>
    <td>Row 5</td>
  </tr>
</table>

Upvotes: 7

SW4
SW4

Reputation: 71150

You need to remove the border from both your table, and the cells in the .header row, no need to use :first-child or :first-of-type as you've given the row the class header

Demo Fiddle

.table2 {
    border-collapse: collapse;
    border-spacing:0;
    text-align: center;
    /* remove the border from here */
}
.table2 .header td{
    border:none; /* and from here */
}

Upvotes: 3

Mike Hopkins
Mike Hopkins

Reputation: 1181

As an alternative to the other answers, if your intention is that the first row be styled this way to be a header row, you could also consider using the more semantic <thead> grouping with <th> elements, if that's practical. You could then class them (advisable) or just rely on the tag names (less advisable due to selector performance, but still possible).

By then grouping subsequent rows within a <tbody>, you could also simplify your alternate row colouring selector, as you would be able to avoid the :not pseudo-selector.

Example of adjusted code:

<table class="table2">
  <thead class="header">
    <tr><th>Lp.</th><th>Column 1</th><th>Column 2</th></tr>
  </thead>
  <tbody>
    <tr><td>1</td><td>Row 1</td><td>Row 1</td></tr>
    <tr><td>2</td><td>Row 2</td><td>Row 2</td></tr>
    <tr><td>3</td><td>Row 3</td><td>Row 3</td></tr>
    <tr><td>4</td><td>Row 4</td><td>Row 4</td></tr>
    <tr><td>5</td><td>Row 5</td><td>Row 5</td></tr>
  </tbody>
</table>

Upvotes: 1

Tomas Turan
Tomas Turan

Reputation: 1255

I think css pseudo class :first-child could help you: http://www.w3schools.com/cssref/sel_firstchild.asp

Upvotes: 3

Related Questions