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，则可以使用常量5作为colspan。它不会创建额外的列。

对CSS的更改：

table {
  border-spacing: 0;
  border-collapse: collapse;
}

table td {
  border: 1px solid white;
}

Snippet 1

＆＃13;

＆＃13;

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";
  }  
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

---

摘录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;
  }
}

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用JavaScript可以做到这一点。你只需要一些类，为你的媒体查询添加一些特定的CSS元素。然后，您可以通过JavaScript检测CSS的更改并更改colspan。 （灵感来自here）

＆＃13;

＆＃13;

'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');
  }
}

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

CodePen link