CODEWITHSUNDEEP
htmlcss
John Smith
John Smith

Reputation: 1687

How do I get rid of the last tr td bottom border using css?

I need your help,

How can I get rid of the last table row bottom border using CSS? I have used color coding on the HTML page to identify which border belong to what. I can see that the bottom border needs to be removed as it is clashing with my container border:

<!DOCTYPE html>
<html>
<head>

<style>

/* ----- Scrolling Table ----- */
.dataGridHeader {
position:relative;
padding-top:24px;
_padding-top:23px;

width:895px;

border-left: 1px solid red;
border-bottom: 1px solid orange;
}

.dataGridContent {
overflow:auto;
width:915px;
height:144px;
}

.dataGridHeader thead tr {
width:915px;
position:absolute;
top:0;
left:0;
}

.dataGridHeader table thead tr th, .dataGridHeader table tbody tr td { 
text-align:left;
height:0;
}

table.scrolltablestyle {
border-top: 1px solid #D9D9D9;
}

table.scrolltablestyle tbody tr td{
    background: #fff;
    text-align:left;
    padding: 4px 9px;
    border-bottom: 1px solid #999;
    border-right: 1px solid blue;
}
table.scrolltablestyle thead tr th{
background-color: #FFFFD9;
font-weight: normal;
text-align:left;
padding: 4px 9px 4px 9px;
border-bottom: 1px solid #999999;
}

table.scrolltablestyle thead tr th {
    border-right: 1px solid blue;
    border-top: 1px solid blue;
}

table.scrolltablestyle tbody tr td{
    border-right: 1px solid green;
}




</style>



</head>
<body>

<div class="dataGridHeader">
  <div class="dataGridContent">
    <table cellpadding="0" cellspacing="0" class="scrolltablestyle style-even">
      <thead>
        <tr>
          <th width="160">Shopper Name</th>
          <th width="160">First Name</th>
          <th width="160">Last Name</th>
          <th width="160">User ID</th>
          <th width="160">Status</th>
        </tr>
      </thead>
      <tbody>
  <tr>
    <td width="160">C2C Fishing</td>
    <td width="160">John</td>
    <td width="160">Doe</td>
    <td width="160">C2C Fishing</td>
    <td width="160">Enabled</td>
  </tr>
  <tr>
    <td width="160">C2C Fishing</td>
    <td width="160">John</td>
    <td width="160">Doe</td>
    <td width="160">C2C Fishing</td>
    <td width="160">Enabled</td>
  </tr>
    <tr>
    <td width="160">C2C Fishing</td>
    <td width="160">John</td>
    <td width="160">Doe</td>
    <td width="160">C2C Fishing</td>
    <td width="160">Enabled</td>
  </tr>
    <tr>
    <td width="160">C2C Fishing</td>
    <td width="160">John</td>
    <td width="160">Doe</td>
    <td width="160">C2C Fishing</td>
    <td width="160">Enabled</td>
  </tr>
    <tr>
    <td width="160">C2C Fishing</td>
    <td width="160">John</td>
    <td width="160">Doe</td>
    <td width="160">C2C Fishing</td>
    <td width="160">Enabled</td>
  </tr>
    <tr>
    <td width="160">C2C Fishing</td>
    <td width="160">John</td>
    <td width="160">Doe</td>
    <td width="160">C2C Fishing</td>
    <td width="160">Enabled</td>
  </tr>
    <tr>
    <td width="160">C2C Fishing</td>
    <td width="160">John</td>
    <td width="160">Doe</td>
    <td width="160">C2C Fishing</td>
    <td width="160">Enabled</td>
  </tr>
    <tr>
    <td width="160">C2C Fishing</td>
    <td width="160">John</td>
    <td width="160">Doe</td>
    <td width="160">C2C Fishing</td>
    <td width="160">Enabled</td>
  </tr>

      </tbody>
    </table>
  </div>
</div>
</body>
</html>

Upvotes: 0

Views: 3250

Answers (2)

Sachin
Sachin

Reputation: 40970

Just use this

table.scrolltablestyle tr:last-child td
{
border-bottom:none;
}

Or you can just set as like this

table.scrolltablestyle tr:last-child td
{
border-bottom:0;
}

Upvotes: 6

suspectus
suspectus

Reputation: 17258

Remove this line-:

 border-bottom: 1px solid orange;

Upvotes: 1

Related Questions