css 中table响应式

CSS中的表格可以使用响应式设计来实现更好的适应不同的屏幕大小和设备类型。在设计响应式表格的时候，我们需要考虑以下几点:

1. 设置表格宽度为100%。

table {
    width: 100%;
}

2. 隐藏表格头部的列。

thead th {
    display: none;
}

3. 使用伪元素“before”来添加表头列的标题。

@media screen and (max-width: 767px) {
table thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
}
table tbody tr:nth-of-type(2n+1) {
    background-color: #f8f8f8;
}
table td:before {
    content: attr(data-th);
    width: 120px;
    display: inline-block;
    font-weight: bold;
    padding: 1em .5em;
}
}

4. 使用CSS3中的媒体查询来设置表格在不同屏幕大小下显示效果。

@media screen and (max-width: 480px) {
table td {
    display: block;
    text-align: right;
}
table td:before {
    content: attr(data-th);
    float: left;
    width: 50%;
    margin-left: -50%;
    font-weight: bold;
}
}
    

通过以上的CSS样式设置，我们可以实现一个响应式表格，在不同设备屏幕大小下都能够显示出最佳的效果，提高网站的可读性和用户体验。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！