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移动到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> 

Answer 2

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

 '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链接