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


Tags: html,css,html5,css3

Problem :

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>


Solution :

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;
}

    CSS Howto..

    How to change color of a single letter in a word using CSS/HTML or Javascript [closed]

    How to display message inline

    How to change only one function of CSS transform property w/ multiple functions?

    How to find class =“class1” included class=“class2” in CSS? [closed]

    How to remove mystery indents in a form?

    How do I set the style of children using css modules in a reactjs project using classNames and JSX

    CSS Ribbon - How to make a transparent triangle while disregarding background

    Use CSS to show two div's with background image over a containing div

    How to create a level 4 submenu with this css?

    How to stop people from viewing my HTML and CSS [closed]

    How to create a darker background on a whole page with one new div

    how to prevent datepicker css from changing

    repeated divs loaded by angular could have different contents, how can I make them have automatically adjusted heights?

    how to make the osx-like border on css?

    How to remove white border from blur background image

    How to dynamically generate droppable/draggable/sortable div elements within a div?

    Using CSS how best to display name value pairs?

    how to get value of colors from CSS

    How to add css and js files on node pages independent of the theme?

    How to remove an css style from a div ?

    css - I've got a nested floating div, how do I get it to fill the entire 100%?

    How To Do Multiple Hover On List

    How do I inline the :before element when unable to include a CSS/style section?

    How to make custom layout grids more semantic? [closed]

    How to highlight the menu item in menu

    How can I make buttons flash different background colors when clicked/

    How to use images for check boxes using CSS or may be Javascript?

    How to stop ReSharper removing spaces after css properties

    How to handle caching of GWT theme CSS files

    How to stop children from clipping when using dynamic height parents?