How to deal with table colspans that may change at runtime

HTML & CSS
1

I have a table that has 7 columns. 3 of these columns, th elements have class=“hide”.

A media query, sets these “hide” th cells to display:none when the screen width is 767px and below.

The problem I have is that this table has rows in which we have hardcoded colspan=7 values that are no longer correct when the media query is active (ie, screen width is <= 767px)

Is there a way to dynamically set the TD colspan from 7 to 4 via CSS?

Alternately, I suppose it could be done with jquery, but I’m not entirely keen on resorting to that if I can manage it with CSS.

Thanks!

2

Hi,

I’m afraid you can’t change colspan with css.

Rather than making the cells display:none have you tried setting their width and padding to zero and hiding the overflow. You will probably need the table-layout:fixed algorithm on the table to achieve this.

What is the problem you are experiencing exactly. Is the display broken at the smaller screen? Do you have a demo of the problem.

3

With the colspans spanning the whole table, it should not break the display when some cols are hidden.
It’s hard to say without seeing the table and the context of its data, but with this header spanning the full width, not naming individual columns, perhaps <caption> would be more appropriate.

4

Two of the table’s six TH columns are being hidden when the browser width is <=767px. Within the tbody, there are multiple table rows on the table. They each contain a single TD cell that begins with colspan=“6”. This TD cell contains a complex table that itself is set to display none until an expand arrow is clicked to reveal the table row’s contents.

Everything works great when the site is viewed on desktop browser and the visible column count is 6. However, when the browser is resized down to the target media query zone (<=767px), the hiDE CSS kicks in and removes 2 of the 6 columns, effectively making it a 4 column table. However, the hardcoded colspan is still set to 6.

So, what happens is that when the expanded content is opened, the TD holding that content is set to colspan=“6”, when in actuality it should be colspan=“4”

Because of this, the parent table cells still try to span 6 columns with only 4 visible columns, resulting in the table only extending to about 2/3rds the width of the original table width.

5

We’d need to see a demo because in my tests in makes no difference if I hide the columns as the colspan works on html not css.

e.g.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>

table{width:100%;max-width:600px;margin:auto;border-collapse:collapse;}
td,th{padding:10px;border:1px solid #000;}
th{background:red}
td[colspan="7"]{background:green}
@media screen and (max-width:767px) {
	th{display:none}
}

</style>
</head>

<body>
<h1>Resize window to less than 767px</h1> 
<table>
  <tr>
    <th>Header</th>
    <td>Content</td>
    <th>Header</th>
    <td>Content</td>
    <th>Header</th>
    <td>Content</td>
    <td>Content</td>
  </tr>
  <tr>
    <td colspan="7">colspan="7"</td>
  </tr>
  <tr>
    <th>Header</th>
    <td>Content</td>
    <th>Header</th>
    <td>Content</td>
    <th>Header</th>
    <td>Content</td>
    <td>Content</td>
  </tr>
  <tr>
    <td colspan="7">colspan="7"</td>
  </tr>
  <tr>
    <th>Header</th>
    <td>Content</td>
    <th>Header</th>
    <td>Content</td>
    <th>Header</th>
    <td>Content</td>
    <td>Content</td>
  </tr>
</table>
</body>
</html>

As I understand it (:smile: ) the colspan attribute is an html attribute and doesn’t know about css so the table will always have the html for 7 columns. Just because css hides a cell it doesn’t affect the actual html.

My demo above works well enough but it may be that in more complex demos something else may happen so we would really need to see a live demo of the problem.

1 Like
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.