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?
