Jump to content

HTML Table - Responsive Colspan (On Window Resize)


Manny

Recommended Posts

I've created a table that works responsively across various screen sizes, with columns appearing and collapsing as desired to suit the different devices on which it can be loaded.

One issue I'm having, however, regards the `colspan` element. There are instances in which I would like to have a column stretch across an entire row.

A quick search of Github has found the following piece of jQuery:

    $(function() {
    
        jQuery.fn.exists = function(){return this.length>0;}
        
        // Dynamic Colspan
        if($('[colspan="auto"]').exists())
        {
            $.each($('[colspan="auto"]'), function( index, value ) {
                var table = $(this).closest('table');    // Get Table
                var siblings = $(this).closest('tr').find('th:visible, td:visible').not('[colspan="auto"]').length; // Count colspan siblings
                var numCols = table.find('tr').first().find('th:visible, td:visible').length; // Count visible columns
                $(this).attr('colspan', numCols.toString()-siblings); // Update colspan attribute
            });
        }
    
    });

Source: https://gist.github.com/afbora/6c98337a3455d45b6ae4e620d5cfbcf2

Here is an example of my table structure:

    <table>
      <thead>
        <tr>
          <th></th>
          <th></th>
          <th></th>
          <th></th>
          <th></th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td colspan="auto">Divider</td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </tbody>
    </table>

As you can see, I have a row which makes use of `colspan="auto"` and works fantastically well with the jQuery source from above - automatically expanding to the full width of the row on page load.

Where this breaks down, however, is in any instance where a `<td>` has been selected to be hidden in a responsive stylesheet. Instead of switching from `colspan="6"` to `colspan="5"` behind the scenes (DOM), we end up with one row where the colspan is too large.

I've looked into `window.onresize`, as I believe the jQuery should run when the browser is made bigger or smaller, but am yet to have any success.

Link to comment
Share on other sites

Tell me this is used for showing tabular data and not for design layout.

Design layout

1) Requires JavaScript/Jquery to manipulate, search bots don't read JavaScript/Jquery created layout, it will show as default without manipulation.

2) Tables are rendered twice, once for td content finishing with second the table structure.

 

Link to comment
Share on other sites

At this stage it is all trial and error for a design.

The table works perfectly, with colspan="auto" being converted into colspan="6" through the jQuery shown in my opening post.

If there is a way, even without the code above, to have the value of colspan change responsively, that's what I'm hoping for.

Link to comment
Share on other sites

Using colspan="0" stretches to whatever col number on its own, using tables is impractical, because it renders twice, using more bandwidth, it does not flow as you would have with divs, such as automatically going to next line, have adjusting independently widths, The use of media queries to adjust widths which is always available unlike JavaScript.

Link to comment
Share on other sites

My issue seems to stem from having the following as part of my CSS:

table { table-layout: fixed; }

colspan="auto" now seems to work as desired, but colspan="0" doesn't alter the default behaviour of <td>. A browse of the web also brings up differing opinions on the browser support of colspan="0".

EDIT

colspan="auto" appears to work when the browser window decreases in size, but not once the window size increases. In this instance, a window.onresize could provide a working solution if there is no other pure HTML/CSS alternative for a <table>.

Edited by Manny
Further feedback
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...