Jump to content
Manny

HTML Table - Responsive Colspan (On Window Resize)

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.

Share this post


Link to post
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.

 

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Another reason not to waste time using tables, when the use of divs sections other elements will give you a more manageable, practical design. TABLE's should only be used for showing tabular data.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...