html和css表重叠与tr和td的边界

Question

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

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

使最后一个<td>没有边框将无效，因为行是动态的，可以添加或删除。

某事like this，但除非有另一行，否则不会显示滚动条。

我希望它看起来like this，但当有一个新行时，它会滚动但添加溢出：滚动到表格，在没有新行时创建滚动条。

<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

阅读评论和重读问题后的新答案（我仍然不确定你到底想要什么，但我猜）。

你试过这个：

'N'

Answer 2

制作高度的td：例如50px，高度为100px的表;

在此链接中修改编辑器中的第一行： https://jsfiddle.net/7zupuvc4/2/  对此：

<div class="table-wrapper" style="height:100px;border: solid 1px #CCC;">

整个答案是：

<div class="table-wrapper" style="height:100px;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>

CSS：

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

Answer 3

您可以做一些事情：

  

重置border-spacing（以及div的高度以查看完整行）

     

选择 last tbody / tfoot 和然后最后tr 来删除最后一行的边框底部（原因仍有一点以某种方式显示:)）。

https://jsfiddle.net/7zupuvc4/7/

tbody {
  width: 100%;
}
td {
  height: 50px;
  border-bottom: solid 1px #CCC;
  width: 100%;
}
:last-of-type tr:last-of-type td {
  /* here select either the last tbody or tfoot and then last tr ... */
  border-bottom: 0 solid;
}
tr {
  width: 100%;
}
.table-wrapper {
  overflow: auto;
}
table {
  width: 100%;
  border-spacing: 2px 0;/* div height is reset too */
}

<div class="table-wrapper" style="height:264px;border: solid 1px #CCC;">
  <table>
    <tbody>
      <tr>
        <td>
          stackoverflow
        </td>
      </tr>
      <tr>
        <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>

或者你想要的最大高度？ https://jsfiddle.net/7zupuvc4/10/

table:hover tbody + tbody {
  display: table-row-group;
}
tbody + tbody {
  display: none;
}
tbody {
  width: 100%;
}
td {
  height: 50px;
  border-bottom: solid 1px #CCC;
  width: 100%;
}
table >:last-of-type tr:last-of-type td {
  /* here select either the last tbody or tfoot and then last tr ... */
  border-bottom: 0 solid;
}
tr {
  width: 100%;
}
.table-wrapper {
  overflow: auto;
}
table {
  width: 100%;
  border-spacing: 2px 0;
  /* div height is reset too */
}

<div class="table-wrapper" style="max-height:264px;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>
    </tbody>
    <tbody>

      <tr>

        <td>
          stackoverflow
        </td>
      </tr>
      <tr>
        <td>
          stackoverflow
        </td>
      </tr>
      <tr>
        <td>
          stackoverflow
        </td>
      </tr>
      <tr>
        <td>
          stackoverflow
        </td>
      </tr>
    </tbody>
  </table>
</div>

使用FLEX boxmodel评论后更新：

table , tbody {
  height: 100%;
  display: flex;
  flex-direction: column;
}

tbody {
  flex: 1;
  overflow: auto;
}

tr {
  min-height: 54px;
  display: flex;
  flex: 1;
  border-bottom: solid 1px #CCC;
}

.table-wrapper {
  overflow: auto;
}

td {/* you wish to set td content in middle ? */
  display: flex;
  flex: 1;
  align-items: center;
}

/* demo purpose */
.show, .show~tr {
  display:none;
  }
table:hover tr {
  display:flex;
  }

table >:last-of-type tr:last-of-type td {
  /* here select either the last tbody or tfoot and then last tr ... */
  border-bottom: 0 solid;
}

<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 class="show">
        <td>
          stackoverflow
        </td>
      </tr>
      <tr>
        <td>
          stackoverflow
        </td>
      </tr>
      <tr>
        <td>
          stackoverflow
        </td>
      </tr>
      <tr>
        <td>
          stackoverflow
        </td>
      </tr>
    </tbody>
  </table>
</div>

Answer 4

我认为你正在寻找类似的东西：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

（另见this Fiddle）