溢出 div 中表格的底部边框

Question

我在溢出的 <div> 中有一张桌子。 我正在努力为表格或 div 制作底部边框，这看起来不错。 目前的情况是：溢出时，div的下边框看起来不错。 当不溢出时，它看起来不合适。 我已经把底边框放在了桌子上，溢出的时候，它显然不会显示。 我对 JavaScript/Jquery/等没有任何经验。 并且到目前为止只尝试使用 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>