在table数据表格内用tbody:empty::before，来实现显示无数据的效果

发布网友发布时间：2022-04-23 09:46

我来回答

共2个回答

热心网友时间：2023-10-09 23:53

如果你要在表格内实现无数据显示的效果，你可以将每一个表格里面的td都设置一个class="hide',，然后样式里面直接就写

.hide{visibility:hidden;}

你要隐藏那些单元格就隐藏那些单元格，不用担心跨列的问题

当然如果用js来写的话，也是可以的，但是麻烦一些，用class是最简单的

热心网友时间：2023-10-09 23:54

* {
[data_empty_reminder]:empty:before {
content: attr(data_empty_reminder);
text-align: center;
width: 100%;
height: 100px;
line-height: 100px;
color: #d6e8f1;
display: block;
}
tbody[data_empty_reminder] {
display: table-caption !important;
caption-side:bottom;
}
tbody[data_empty_reminder]:empty:before {
display: table-row;
}
}