title: How do I remove the bottom border from the last row in my html table?
body: <p>How do I go about removing the bottom border from the very last row in my HTML table?</p>
  
  <p>Here is the CSS:</p>
  
  <pre><code>#data {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    border: 1px solid red;
  }
  #data th {
      text-decoration: underline;
      border: 1px solid blue;
  }
  #data td {
      border: 1px solid blue;
  }
  #data th, #data td {
    padding: 5px;
    text-align: left;
    width: 150px;
  }
  #data thead {
    background-color: #333333;
    color: #fdfdfd;
  }
  #data thead tr {
    display: block;
    position: relative;
  }
  #data tbody {
    display: block;
    overflow: auto;
    width: 100%;
    height: 300px;
  }
  #data tbody tr:nth-child(even) {
    background-color: #dddddd;
  }
  </code></pre>
  
  <p>Here is a quick fiddle: <a href="http://jsfiddle.net/tZ9cA/" rel="nofollow">http://jsfiddle.net/tZ9cA/</a></p>