带有圆角的可滚动 table

Question

我制作了一个 table，当行太多时它会垂直滚动。这可以在这里看到 https://jsfiddle.net/hp5je3ko/1/。但是，我想为 table 添加一个边框半径。如您所见，向 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>

Answer 1

我写你需要的代码

        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 2

你试试这个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;
        }

最后您还可以使用以下与您的 table 框半径相关的 css 设置滚动条..

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

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

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

Answer 3

已从 table 中删除 border-radius。

主要思想 添加到 th 和页脚 td 两个 div 的每个第一个和最后一个子项 [=16] =] 和不同的 z-indexes。底部有背景颜色（白色），上面有 border-radius 和 table.

颜色

其余修改请查看代码段。

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

Answer 4

已删除 table 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>

带有圆角的可滚动 table

Scrollable table with rounded corners

html

css

html-table

css-tables