带圆角的可滚动表格答案

【问题标题】：Scrollable table with rounded corners带圆角的可滚动表格
【发布时间】：2020-05-08 20:46:43
【问题描述】：

我制作了一个表格，当行数过多时可以垂直滚动。这可以在这里看到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>

【问题讨论】：

试试这个圆形边框.table-wrapper { background-color: #121212; border-radius: 30px; } .table-wrapper table { background-color: transparent; }
@bron 效果一样
如How to Ask 中所述，您可以链接到jsfiddle，“但也将代码复制到问题本身中”。

标签： html css html-table css-tables

【解决方案1】：

删除表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>

【讨论】：

@JackP 我还建议指定 .table-wrapper::-webkit-scrollbar

【解决方案2】：

我根据你的需要编写代码

        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>

【讨论】：

谢谢，但是我需要能够设置每列的宽度。还有为什么tbody上面有空隙？
我在表格中使用了弹性框，在弹性框（弹性基础）属性中使用宽度我已经将列的宽度设置为 100%

【解决方案3】：

你试试这个CSS，我想你的问题会解决的，谢谢..！

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

你也可以使用以下与你的表格框半径相关的 css 来设置滚动条..

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

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

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

【讨论】：

谢谢，但滚动条位于 tbody 内意味着角未对齐。右下角的文字也会转义。

【解决方案4】：

从表中删除border-radius。

主要思想添加到ths 和页脚tds 两个divs 的每个第一个和最后一个子级，position: absolute 和不同的z-indexes。底部有背景颜色（白色），上方有border-radius 和表格颜色。

其余修改请查看sn-p。

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

【讨论】：

谢谢，但我真的不希望桌子底部有一个随机条。知道如何在没有页脚的情况下实现这一目标吗？
@JackP又发了一个变种，最简单的，请看