作者:TheKing小狼 | 来源:互联网 | 2023-05-21 19:59
我的网页上有一个响应表。该表包含三列和很多行。但是,有些行的colspan 3仅包含一列。
我只需要一个带有两列其他表格的表格(仅适用于大屏幕),因此我需要将colspan修改为5。
中小屏幕
+---------+---------+---------+
| xxxxx | xxxxx | xxxxx |
+---------+---------+---------+
| xxxxxxxxxxxxxxxxxxxxxxxxxxx |
+---------+---------+---------+
| xxxxx | xxxxx | xxxxx |
+---------+---------+---------+
| xxxxx | xxxxx | xxxxx |
+---------+---------+---------+
| xxxxx | xxxxx | xxxxx |
+---------+---------+---------+
大屏幕-我有什么
+---------+---------+---------+---------+---------+
| xxxxx | xxxxx | xxxxx | xxxxx | xxxxx |
+---------+---------+---------+---------+---------+
| xxxxxxxxxxxxxxxxxxxxxxxxxxx |
+---------+---------+---------+---------+---------+
| xxxxx | xxxxx | xxxxx | xxxxx | xxxxx |
+---------+---------+---------+---------+---------+
| xxxxx | xxxxx | xxxxx | xxxxx | xxxxx |
+---------+---------+---------+---------+---------+
| xxxxx | xxxxx | xxxxx | xxxxx | xxxxx |
+---------+---------+---------+---------+---------+
大屏幕-我想要的东西
+---------+---------+---------+---------+---------+
| xxxxx | xxxxx | xxxxx | xxxxx | xxxxx |
+---------+---------+---------+---------+---------+
| xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx |
+---------+---------+---------+---------+---------+
| xxxxx | xxxxx | xxxxx | xxxxx | xxxxx |
+---------+---------+---------+---------+---------+
| xxxxx | xxxxx | xxxxx | xxxxx | xxxxx |
+---------+---------+---------+---------+---------+
| xxxxx | xxxxx | xxxxx | xxxxx | xxxxx |
+---------+---------+---------+---------+---------+
无法在CSS中修改colspan,并且无法在Javascript中从CSS获得@media查询。我不想在代码的两个地方都定义断点。另外,在Javascript中,由于滚动条和浏览器对此的不同实现,存在正确识别屏幕宽度的问题(它可能不与CSS断点对应,请在此处阅读更多内容)。
是否有可能仅通过CSS断点实现此目标?我需要先将设计移动。
1> Rick Hitchco..:
如果您从您的移动边界table
到您的td
S,你可以用一个常数5为您列跨度。它不会创建多余的列。
对CSS的更改:
table {
border-spacing: 0;
border-collapse: collapse;
}
table td {
border: 1px solid white;
}
片段1
table {
border-spacing: 0;
border-collapse: collapse;
}
table td {
border: 1px solid white;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
table td {
border: 1px solid white;
width: 80px;
height: 30px;
background-color: #99CCFF;
padding: 10px;
font-family: Calibri, sans-serif, Arial;
font-size: 20px;
text-align: center;
color: white;
}
table td[colspan] {
background: #5CAD5C;
}
table td[colspan]::before {
content:"3 columns, colspan=5";
}
table td.large-only {
display: none;
}
@media screen and (min-width: 1025px) {
table td.large-only {
display: table-cell;
}
table td[colspan]::before {
content:"5 columns, colspan=5";
}
}