Bottom border for table in overflowing div - html

Question

I have a table inside an overflowing < div >. I am struggling to make bottom-border, either for the table or for the div, that will look nice. The current situation is: when overflowing, the bottom-border of the div looks nice. When not overflowing, it looks out of place. I have put the bottom-border on the table, when overflowing, it will obviously not show. I don't have any experience with JavaScript/Jquery/etc. and have tried to only use CSS for this so far.
#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>
Better observable here, because the result screen can be resized:
https://jsfiddle.net/s43yuebt/2/
Can I achieve what I want by only using CSS?

Answer 1

use max-height on #table_wrapper
#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>