Q:

html and css table overlap border with tr and td

I have a table that has a border and I want to keep the table scrollable.  
The rows in the table have a bottom border. What I want is to have the two overlap border but don't cause the scroll bar to appear unless a another row is added.
Making the last <td> not have a border won't work because the rows are dynamic they can be added or deleted.
Something like this, but not have the scrollbar appear unless there's another row.
I want it to look like this, but when theres a new row, it'll scroll but adding a overflow:scroll to table, creates the scrollbar when there are no new rows.
<div class="table-wrapper" style="height:272px;border: solid 1px #CCC;">
<table>
<tbody>
 <tr>
 <td>
     stackoverflow 
 </td>
 </tr>
  <tr>
   <td>
     stackoverflow 
 </td>
 </tr>
  <tr>
    <td>
     stackoverflow 
 </td>
 </tr>
  <tr>
     <td>
     stackoverflow 
 </td>
 </tr>
  <tr>
     <td>
     stackoverflow 
 </td>
 </tr>
</tbody>
</table>
</div>

tbody{
  width:100%;
}
td{
  height:50px;
  border-bottom:solid 1px #CCC;
  width:100%;
}
tr{
  width:100%;
}
.table-wrapper{
  overflow:auto;
}
table{
  width:100%;
}

A:

I think you're looking for something like this :

.table-wrapper {
    overflow : hidden;
    height : 300px;
}

.table-wrapper, table {
    height : 300px;
}

.table-wrapper, td {
    border : solid 1px #CCC;
}

table, tbody, tr, td {
    box-sizing: border-box;
    display: block;
}

table {
    margin: 1px 0 0 0;
    overflow : auto;
}

td {
    height: 60px;
    border-width : 0 0 1px 0;
}
<div class="table-wrapper">
    <table>
        <tbody>
             <tr>
                 <td>stackoverflow</td>
             </tr>
              <tr>
                 <td>stackoverflow</td>
             </tr>
              <tr>
                 <td>stackoverflow</td>
             </tr>
              <tr>
                 <td>stackoverflow</td>
             </tr>
              <tr>
                 <td>stackoverflow</td>
             </tr>
        </tbody>
    </table>
</div>

(see also this Fiddle)

