html 和 css 表格与 tr 和 td 重叠边框

Question

我有一个带边框的表格，我想让表格保持可滚动。

表格中的行有一个底部边框。我想要的是有两个重叠边框，但除非添加另一行，否则不会导致滚动条出现。

制作最后一个<td>没有边框将不起作用，因为行是动态的，可以添加或删除它们。

东西 like this ，但除非有另一行，否则不会出现滚动条。

我希望它看起来是like this ，但是当有新行时，它会滚动，但会添加一个 overflow:scroll 到表，在没有新行时创建滚动条。

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

Answer 1

我认为您正在寻找这样的东西:

.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>

(另见 this Fiddle)