Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Scrollable table with rounded corners

Tags:

html

css

html-table

css-tables

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>
like image 403
Jack P Avatar asked Oct 15 '25 16:10

Jack P

1 Answers

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>
like image 148
Aleksandr Belugin Avatar answered Oct 18 '25 07:10

Aleksandr Belugin
Sign in to Comment

Related questions

Replace HTML links with text
Unable to find PHPunit phar. check php unit congifurations:eclipse oxygen
forms html action
Place dollar symbol inside a text input
QT html and CSS to pdf file
PHP DOMDocument loadHTML error
How to use bootstrap 4 margin and padding properties with pixels?
Python-Docx Inserting HTML into Docx
Flex items not centering vertically
Passing Variable from HTML to Python/Flask
How to properly download and install packages in Go?

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!