时间戳

首页 > 解决方案 > 带圆角的可滚动表格

html - 带圆角的可滚动表格

问题描述

我制作了一个表格，当行数过多时它会垂直滚动。这可以在这里看到https://jsfiddle.net/hp5je3ko/1/。但是，我想在表格中添加一个边框半径。如您所见，table仅当您向右滚动到底部时才会显示为自身添加边框半径。.table-wrapper几乎可以添加边框半径。但是，右上角和左上角的圆角不正确，因为滚动条位于包装器内。

我怎样才能使这个边界半径起作用？

谢谢。

.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>

标签： htmlcsshtml-tablecss-tables

解决方案

删除表border-radius

制作包装器的主要思想width: fit-content，添加到它border-radius并制作滚动条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>

推荐阅读