javascript - Colspan修改依赖CSS3 @media Query

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 断点对应，阅读更多 here)。

是否有可能仅使用 CSS 断点来实现这一点？我需要先让我的设计移动。

Answer 1

如果将边框从 table 移动到 td，则可以为 colspan 使用常量 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;
  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";
  }  
}

<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>

---

片段 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 {
  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.large-only, table td[colspan="5"] {
  display: none;
}

@media screen and (min-width: 1025px) {
  table td.large-only {
    display: table-cell;
  }

  table td[colspan="3"] {
    display: none;
  }

  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="3">colspan=3</td>
    <td colspan="5">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>