Нижняя граница для таблицы в переполненном div

Question

У меня есть таблица внутри переполненного

. Я изо всех сил стараюсь сделать нижнюю границу, либо для таблицы, либо для div, которая будет хорошо выглядеть Текущая ситуация такова: при переполнении нижняя граница элемента div выглядит красиво. Когда не переполняется, это выглядит неуместным. Я поставил нижнюю границу на стол, при переполнении она явно не будет отображаться. У меня нет опыта работы с JavaScript / Jquery / et c. и до сих пор пытались использовать только 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

использовать max-height на #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>