Scrollable table with rounded corners

Question

I have made a table which scrolls vertically when there is too many rows. This can be seen here https://jsfiddle.net/hp5je3ko/1/ . However, I would like to add a border radius to the table. As you can see, adding a border radius to the table itself only shows up when you scroll right to the bottom. Adding a border radius to .table-wrapper almost works. However, the top right and top left corners are not rounded properly because the scroll bar is inside the wrapper.

How can I make this border radius work?

Thanks.

 .table-wrapper { height: 400px; max-height: 400px; overflow-y: auto; text-align: left; }.table-wrapper * { margin: 0; box-sizing: border-box; }.table-wrapper table { border-collapse: separate; font-size: 13px; background-color: #121212; text-transform: uppercase; border-spacing: 0; table-layout: fixed; border-radius: 30px; color: #fff; } table thead tr th { padding: 18px 24px; border-bottom: 1px solid #1c1c1c; position: sticky; top: 0; background-color: #121212; } table tbody tr td { padding: 11px 24px; overflow: hidden; text-overflow: ellipsis; }

 <div class="table-wrapper"> <table> <thead> <tr> <th>Item</th> <th>Item</th> <th>Item</th> <th>Item</th> <th>Item</th> <th>Item</th> </tr> </thead> <tbody> <tr> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> </tr> <tr> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> </tr> <tr> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> </tr> <tr> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> </tr> <tr> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> </tr> <tr> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> </tr> <tr> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> </tr> <tr> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> </tr> <tr> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> </tr> <tr> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> </tr> <tr> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> </tr> <tr> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> </tr> <tr> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> </tr> <tr> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> </tr> <tr> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> </tr> </tbody> </table> </div>

Answer 1

removed table border-radius

Main idea to make wrapper width: fit-content , add to it border-radius and make scrollbar width: 0

 .table-wrapper { height: 400px; max-height: 400px; overflow-y: auto; text-align: left; width: fit-content; border-radius: 30px; }.table-wrapper * { margin: 0; box-sizing: border-box; }.table-wrapper table { border-collapse: separate; font-size: 13px; background-color: #121212; text-transform: uppercase; border-spacing: 0; table-layout: fixed; color: #fff; } table thead tr th { padding: 18px 24px; border-bottom: 1px solid #1c1c1c; position: sticky; top: 0; background-color: #121212; } table tbody tr td { padding: 11px 24px; overflow: hidden; text-overflow: ellipsis; }::-webkit-scrollbar { width: 0; }

 <div class="table-wrapper"> <table> <thead> <tr> <th>Item</th> <th>Item</th> <th>Item</th> <th>Item</th> <th>Item</th> <th>Item</th> </tr> </thead> <tbody> <tr> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> </tr> <tr> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> </tr> <tr> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> </tr> <tr> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> </tr> <tr> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> </tr> <tr> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> </tr> <tr> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> </tr> <tr> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> </tr> <tr> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> </tr> <tr> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> </tr> <tr> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> </tr> <tr> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> </tr> <tr> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> </tr> <tr> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> </tr> <tr> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> </tr> </tbody> </table> </div>

Answer 2

I write code for what you needed

 body { padding: 4rem; }.table{ display: block; empty-cells: show; border-spacing: 0; border: 1px solid; border-radius: 2rem; }.table thead{ background-color:orangered; position: relative; display: block; width: 100%; border-radius: 2rem 2rem 0rem 0rem; color: white; }.table tbody{ max-height: 20rem; padding: 2rem; display: block; overflow-y:scroll; border-top: 2px solid rgba(0,0,0,0.2); }.table tr{ width: 100%; display:flex; }.table td,.table th{ flex-basis:100%; flex-grow:2; display: block; padding: 1rem; text-align:left; }.table tbody tr:nth-child(2n){ background-color: orangered; }

 <body> <table class="table "> <thead> <tr> <th>Head 1</th> <th>Head 2</th> <th>Head 3</th> <th>Head 4</th> </tr> </thead> <tbody class="body"> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td></td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr><tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr><tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr><tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr><tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr><tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr><tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr><tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> </tbody> </table> </body>

Answer 3

you try this CSS, I think your problem will be solved, thank you..!

 .table-wrapper{ padding: 50px; } table{ display: block; border-radius: 50px; background-color: yellow; } table thead{ background-color:pink; position: relative; display: block; width: 100%; border-radius: 20px 20px 0px 0px; color: white; } table tbody{ max-height: 250px; display: block; overflow-y:scroll; } table tr{ width: 100%; display:flex; } table td,table th{ flex-basis:100%; flex-grow:2; display: block; padding: 1rem; text-align:left; }

end also you can set scrollbar using the following css related to your table box radius..

::-webkit-scrollbar { width: 10px; }

    /* Track */
    ::-webkit-scrollbar-track { border: 4px solid transparent; }

    /* Handle */
    ::-webkit-scrollbar-thumb { border: 1px solid rgb(0,0,0); }

Answer 4

Removed border-radius from table.

Main idea added to each first and last children of th s and footer td s two div s with position: absolute and different z-index es. Bottom one has color of background (white), above one has border-radius and color of table.

rest of modifications please look in snippet.

 .table-wrapper { height: 400px; max-height: 400px; overflow-y: auto; text-align: left; }.table-wrapper * { margin: 0; box-sizing: border-box; }.table-wrapper table { border-collapse: separate; font-size: 13px; background-color: #121212; text-transform: uppercase; border-spacing: 0; table-layout: fixed; color: #fff; } table tbody tr td { padding: 11px 24px; overflow: hidden; text-overflow: ellipsis; }.table-wrapper table { border-collapse: separate; font-size: 13px; background-color: #121212; text-transform: uppercase; border-spacing: 0; table-layout: fixed; color: #fff; } table tbody tr td { padding: 11px 24px; overflow: hidden; text-overflow: ellipsis; }.overlay, .overlay2 { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }.overlay2 { background-color: #fff; }.overlay { background-color: #121212; z-index: 3; } table thead tr th:first-child.overlay { border-top-left-radius: 30px; padding: 18px 24px; } table thead tr th:last-child.overlay { padding: 18px 24px; border-top-right-radius: 30px; } table thead tr th { top: 0; border-bottom: 1px solid #1c1c1c; } /* safari and ios need the tfoot itself to be position:sticky also */ table thead tr th, table tfoot, table tfoot th, table tfoot td { position: -webkit-sticky; position: sticky; background-color: #121212; padding: 18px 24px; z-index: 3; } table tfoot, table tfoot th, table tfoot td { bottom: 0; color: #121212; } table tfoot tr td:first-child.overlay { border-bottom-left-radius: 30px; } table tfoot tr td:last-child.overlay { border-bottom-right-radius: 30px; }

 <div class="table-wrapper"> <table> <thead> <tr> <th> <div class="overlay"> Item </div> <div class="overlay2"></div> </th> <th>Item</th> <th>Item</th> <th>Item</th> <th>Item</th> <th> <div class="overlay"> Item </div> <div class="overlay2"></div> </th> </tr> </thead> <tbody> <tr> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> </tr> <tr> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> </tr> <tr> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> </tr> <tr> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> </tr> <tr> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> </tr> <tr> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> </tr> <tr> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> </tr> <tr> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> </tr> <tr> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> </tr> <tr> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> </tr> <tr> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> </tr> <tr> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> </tr> <tr> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> </tr> <tr> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> </tr> <tr> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> <td>Thingggg</td> </tr> </tbody> <tfoot> <tr> <td> <div class="overlay"></div> <div class="overlay2"></div> </td> <td></td> <td></td> <td></td> <td></td> <td> <div class="overlay"></div> <div class="overlay2"></div> </td> </tr> </tfoot> </table> </div>