溢出 div 中 table 的底部边框

Question

我在溢出的

中有一个table。我正在努力为 table 或 div 制作底部边框，这看起来不错。现在的情况是：溢出的时候，div的底边看起来还不错。当不溢出时，它看起来不合适。我把bottom-border放在了table，溢出的时候明显不显示。我对 JavaScript/Jquery/etc 没有任何经验。并且到目前为止只尝试使用 CSS。

#container {
    width: 100%;
    height: 0 auto;
    overflow: auto;
}

#table_wrapper {
    border-bottom: 1px solid #5C6F8C;
    float: none;
    overflow: auto;
    height: 80vh;
    width: 80%;
}

#test_table {
    border-collapse: separate;
    border-spacing: 0;
    letter-spacing: 1px;
    font-family: Verdana, Tahoma, Arial, sans-serif;
    font-size: calc(8px + 0.3vw);
    text-align: center;
    width: 100%;
    /*border-bottom: 1px solid #5C6F8C;*/
}

#top_header {
    border: 2px solid #5C6F8C;
    border-right: 0px;
    background-color: #ADBEDA;
    }

caption {
    background-color:white;
}

td, th {
    border: 1px solid #5C6F8C;
    border-right: 0px;
    border-bottom: 0px;
    padding: 5px 10px;
    text-align: left;
}

tbody > tr:first-child > td {
    border-top: 0px;
}

tbody > tr:first-child > th {
    border-top: 0px;
}

th {
    background-color: #ADBEDA;
    }

tr:nth-child(even) {
    background-color: #CFDDF5;
}

tr:nth-child(odd) {
    background-color: #E3ECFD;
}

tr:hover {
    background-color: #F0F5FF;
    text-shadow:0px 0px 0.25px black;
}

<div id="container">
  <div id="table_wrapper">
    <table id="test_table">
      <thead>
        <th id="top_header">No.</th>
        <th id="top_header">asdad.</th>
        <th id="top_header">asdad</th>
      </thead>
      <tbody>
        <tr><th>1</th><td>asdad</td><td>asdad</td></tr>
        <tr><th>2</th><td>asdad</td><td>asdad</td></tr>
        <tr><th>3</th><td>asdad</td><td>asdad</td></tr>
        <tr><th>4</th><td>asdad</td><td>asdad</td></tr>
        <tr><th>5</th><td>asdad</td><td>asdad</td></tr>
        <tr><th>6</th><td>asdad</td><td>asdad</td></tr>
        <tr><th>7</th><td>asdad</td><td>asdad</td></tr>
        <tr><th>8</th><td>asdad</td><td>asdad</td></tr>
        <tr><th>9</th><td>asdad</td><td>asdad</td></tr>
        <tr><th>10</th><td>asdad</td><td>asdad</td></tr>
      </tbody>
    </table>
  </div>
</div>

此处更易于观察，因为可以调整结果屏幕的大小： https://jsfiddle.net/s43yuebt/2/

只用CSS能达到我想要的效果吗？

Answer 1

在 #table_wrapper

上使用 max-height

#table_wrapper {
    border-bottom: 1px solid #5C6F8C;
    float: none;
    overflow: auto;
    max-height: 80vh;
    width: 80%;
}

#container {
    width: 100%;
    height: 0 auto;
    overflow: auto;
}

#table_wrapper {
    border-bottom: 1px solid #5C6F8C;
    float: none;
    overflow: auto;
    max-height: 80vh;
    width: 80%;
}

#test_table {
    border-collapse: separate;
    border-spacing: 0;
    letter-spacing: 1px;
    font-family: Verdana, Tahoma, Arial, sans-serif;
    font-size: calc(8px + 0.3vw);
    text-align: center;
    width: 100%;
    /*border-bottom: 1px solid #5C6F8C;*/
}

#top_header {
    border: 2px solid #5C6F8C;
    border-right: 0px;
    background-color: #ADBEDA;
    }

caption {
    background-color:white;
}

td, th {
    border: 1px solid #5C6F8C;
    border-right: 0px;
    border-bottom: 0px;
    padding: 5px 10px;
    text-align: left;
}

tbody > tr:first-child > td {
    border-top: 0px;
}

tbody > tr:first-child > th {
    border-top: 0px;
}

th {
    background-color: #ADBEDA;
    }

tr:nth-child(even) {
    background-color: #CFDDF5;
}

tr:nth-child(odd) {
    background-color: #E3ECFD;
}

tr:hover {
    background-color: #F0F5FF;
    text-shadow:0px 0px 0.25px black;
}

<div id="container">
  <div id="table_wrapper">
    <table id="test_table">
      <thead>
        <th id="top_header">No.</th>
        <th id="top_header">asdad.</th>
        <th id="top_header">asdad</th>
      </thead>
      <tbody>
        <tr><th>1</th><td>asdad</td><td>asdad</td></tr>
        <tr><th>2</th><td>asdad</td><td>asdad</td></tr>
        <tr><th>3</th><td>asdad</td><td>asdad</td></tr>
        <tr><th>4</th><td>asdad</td><td>asdad</td></tr>
        <tr><th>5</th><td>asdad</td><td>asdad</td></tr>
        <tr><th>6</th><td>asdad</td><td>asdad</td></tr>
        <tr><th>7</th><td>asdad</td><td>asdad</td></tr>
        <tr><th>8</th><td>asdad</td><td>asdad</td></tr>
        <tr><th>9</th><td>asdad</td><td>asdad</td></tr>
        <tr><th>10</th><td>asdad</td><td>asdad</td></tr>
      </tbody>
    </table>
  </div>
</div>

溢出 div 中 table 的底部边框

Bottom border for table in overflowing div

html

css

border

overflow