Colspan 修改依赖于 CSS3 @media 查询

Question

我的网页上有响应式 table。这个 table 包含三列和很多行。但是，有些行只包含一个 colspan 为 3 的列。

我需要一个 table 和仅用于大屏幕的额外两列，因此我需要将 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

可以用 JavaScript 做到这一点。您只需要有一些 class，它可以为您的媒体查询元素添加一些特定的 CSS。然后您可以通过 JavaScript 检测 CSS 的变化并更改 colspan。（灵感已被采纳here）

'use strict';

$(document).ready(function() {
  // run test on initial page load
  checkSize();

  // run test on resize of the window
  $(window).resize(checkSize);
});

// detect media query by css
function checkSize(){
  if ($('td.large-only').css('display') === 'table-cell' ) {
    $('td[colspan]').attr('colspan', '5');
    $('td[colspan]').text('Colspan: 5');
  } else {
    $('td[colspan]').attr('colspan', '3');
    $('td[colspan]').text('Colspan: 3');
  }
}

table td {
  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 {
  display: none;
}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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"></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>

CodePen link

Answer 2

如果将边框从 table 移动到 td，则可以使用常量 5 作为 colspan。它不会创建额外的列。

更改为 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>

Colspan 修改依赖于 CSS3 @media 查询

Colspan modification dependent on CSS3 @media Query

html

javascript

css

media-queries

responsive-design