带圆角的可滚动表格
Posted
技术标签:
【中文标题】带圆角的可滚动表格【英文标题】：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，“但也将代码复制到问题本身中”。
【参考方案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又发了一个变种，最简单的，请看以上是关于带圆角的可滚动表格的主要内容，如果未能解决你的问题，请参考以下文章
Android：带有圆角的 ScrollView。儿童视野在角落流血
如何为我在 Android 中用作背景的可绘制对象添加圆角？
wpf窗体设置阴影后，窗体圆角就会有阴影颜色，圆角就失效了，如何解决啊？求解