带圆角的可滚动桌子

时间：2020-01-22 16:15:35

标签： html css html-table css-tables

我制作了一个表格，当有太多行时它会垂直滚动。可以在这里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>

4 个答案:

答案 0 :(得分：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>

答案 1 :(得分：0)

我为您所需的代码

        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>

答案 2 :(得分：0)

您尝试使用此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); }

答案 3 :(得分：0)

从表格中删除了border-radius。

主要思想被添加到th和页脚td的两个div（具有position: absolute和不同的{ {1}}。底部的一个具有背景色（白色），上方的一个具有z-index和表的颜色。

其余修改内容，请查看代码段。

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

相关问题
最新问题