Colspan modification dependent on CSS3 @media Query

Question

I have a responsive table on my web page. This table contains three columns and a lot of rows. However, some rows contain only one column with colspan 3.

I need to have a table with two additional columns for large screens only so I need to modify colspan to 5.

Small and medium screens

+---------+---------+---------+
|  xxxxx  |  xxxxx  |  xxxxx  |
+---------+---------+---------+
| xxxxxxxxxxxxxxxxxxxxxxxxxxx |
+---------+---------+---------+
|  xxxxx  |  xxxxx  |  xxxxx  |
+---------+---------+---------+
|  xxxxx  |  xxxxx  |  xxxxx  |
+---------+---------+---------+
|  xxxxx  |  xxxxx  |  xxxxx  |
+---------+---------+---------+

Large screens - what I have

+---------+---------+---------+---------+---------+
|  xxxxx  |  xxxxx  |  xxxxx  |  xxxxx  |  xxxxx  |
+---------+---------+---------+---------+---------+
| xxxxxxxxxxxxxxxxxxxxxxxxxxx |
+---------+---------+---------+---------+---------+
|  xxxxx  |  xxxxx  |  xxxxx  |  xxxxx  |  xxxxx  |
+---------+---------+---------+---------+---------+
|  xxxxx  |  xxxxx  |  xxxxx  |  xxxxx  |  xxxxx  |
+---------+---------+---------+---------+---------+
|  xxxxx  |  xxxxx  |  xxxxx  |  xxxxx  |  xxxxx  |
+---------+---------+---------+---------+---------+

Large screens - what I want to have

+---------+---------+---------+---------+---------+
|  xxxxx  |  xxxxx  |  xxxxx  |  xxxxx  |  xxxxx  |
+---------+---------+---------+---------+---------+
| xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx |
+---------+---------+---------+---------+---------+
|  xxxxx  |  xxxxx  |  xxxxx  |  xxxxx  |  xxxxx  |
+---------+---------+---------+---------+---------+
|  xxxxx  |  xxxxx  |  xxxxx  |  xxxxx  |  xxxxx  |
+---------+---------+---------+---------+---------+
|  xxxxx  |  xxxxx  |  xxxxx  |  xxxxx  |  xxxxx  |
+---------+---------+---------+---------+---------+

It is not possible to modify colspan in CSS and it is not possible to have @media Queries from CSS in JavaScript. I don't want to have break points definiton in two places in my code. Additionaly, in JavaScript there is a problem with correct recognization of screen width because of scroll bars and different browser implementation of this (it may not corespond with the CSS break points, read more here).

Is there any possibility how to achieve this with CSS break points only? I need to have my design mobile first.

Answer 1

It is possible to do that with JavaScript. What you only need is to have some class which adds some specific CSS to your element for your media query. Then you can detect changes of CSS by JavaScript and change the colspan. (inspiration has been taken 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