CODEWITHSUNDEEP
htmlcss
Jeeva
Jeeva

Reputation: 642

How to remove last border from row which is set by tr?

I've a table. The tr is set with a border. I want to remove the last td border from tr.Below is the example

<table>
  <thead>
    <tr>
      <th>a</th>
      <th>b</th>
      <th>c</th>
      <th>d</th>
    </tr>
  </thead>
  <tbody>
    <tr style="border-right: 1px solid #C1DAD7;border-bottom: 1px solid #C1DAD7;">
      <td> adsd </td>
      <td> adsd </td>
      <td> adsd </td>
      <td> adsd </td> <!-- I want to remove the border from this -->
    </tr>
  </tbody>
</table>

Any answer would be appreciated

Upvotes: 3

Views: 5887

Answers (5)

Bogus Hawtsauce
Bogus Hawtsauce

Reputation: 483

Just slap a border:none on the td element. that will remove the border from the cell, you may also want to play with border-right:none, border-bottom:none

<table>
  <thead>
    <tr>
      <th>a</th>
      <th>b</th>
      <th>c</th>
      <th>d</th>
    </tr>
  </thead>
  <tbody>
    <tr style="border-right: 1px solid #C1DAD7;border-bottom: 1px solid #C1DAD7;">
      <td> adsd </td>
      <td> adsd </td>
      <td> adsd </td>
      <td style="border:none"> adsd </td> <!-- I want to remove the border from this -->
    </tr>
  </tbody>
</table>

Upvotes: 0

Roy Bogado
Roy Bogado

Reputation: 4472

:last-child

The :last-child selector allows you to target the last element directly inside its containing element. It is defined in the CSS Selectors Level 3 spec as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent and sibling content.

https://css-tricks.com/almanac/selectors/l/last-child/

table tr td:last-child{
  border:0
}

Upvotes: 9

EnzoTrompeneers
EnzoTrompeneers

Reputation: 1091

:last-child Selector

table {
  border-collapse: collapse;
}
tr {
  border: 1px solid black;
}
tr:last-child {
  border: none;
}
<table>
  <thead>
    <tr>
      <th>a</th>
      <th>b</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> a </td>
      <td> b </td> 
    </tr>
    <tr>
      <td> a </td>
      <td> b </td> 
    </tr><tr>
      <td> a </td>
      <td> b </td> 
    </tr>
    <tr>
      <td> a </td>
      <td> b </td> 
    </tr>
  </tbody>
</table>

Upvotes: 3

Ai N.
Ai N.

Reputation: 21

You can use the :last-child pseudo class (details here).

So your line should look like (assuming you want to remove the bottom border):

tr:last-child { border-bottom-style:hidden; }

This can be put in a separate css file or between <style></style> tags.

Upvotes: 1

mindmaster
mindmaster

Reputation: 1888

Ok. I understand now what you want and you can achieve that by adding this to your CSS.

table tr td:nth-child(4) {
    border: none;
}

We will go to your fourth td and remove any border. If you want to remove any border from other just follow the same logic, replacing the 4 from the td you want.

Upvotes: 0

Related Questions