Colspan修改取决于CSS3 @media查询

Question

我的网页上有一个响应表。该表包含三列和很多行。但是，有些行的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断点实现此目标？我需要先将设计移动。

Answer 1

如果您从您的移动边界table到您的tdS，你可以用一个常数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";
  }  
}

片段2

由于您要保持colspan= 3或5，因此可以使用媒体查询来做到这一点：

更新的HTML：

<td colspan="3">colspan=3</td>
<td colspan="5">colspan=5</td>

更新的CSS：

table td.large-only, table td[colspan="5"] {
  display: none;
}

@media screen and (min-width: 1025px) {
  table td.large-only, table td[colspan="3"] {
    display: none;
  }

  table td.large-only, table td[colspan="5"] {
    display: table-cell;
  }
}

<table>
  <tr>
    <td class="large-only">1</td>
    <td>2</td>
    <td>3</td>
    <td class="large-only">4</td>
    <td>5</td>
  </tr>
  <tr>
    <td colspan="5"></td>
  </tr>
  <tr>
    <td class="large-only">1</td>
    <td>2</td>
    <td>3</td>
    <td class="large-only">4</td>
    <td>5</td>
  </tr>
  <tr>
    <td class="large-only">1</td>
    <td>2</td>
    <td>3</td>
    <td class="large-only">4</td>
    <td>5</td>
  </tr>
  <tr>
    <td class="large-only">1</td>
    <td>2</td>
    <td>3</td>
    <td class="large-only">4</td>
    <td>5</td>
  </tr>
</table>

<td colspan="3">colspan=3</td>
<td colspan="5">colspan=5</td>