Manny Posted March 27, 2017 Share Posted March 27, 2017 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 More sharing options...
dsonesuk Posted March 27, 2017 Share Posted March 27, 2017 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 More sharing options...
Manny Posted March 27, 2017 Author Share Posted March 27, 2017 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 More sharing options...
dsonesuk Posted March 27, 2017 Share Posted March 27, 2017 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 More sharing options...
Manny Posted March 27, 2017 Author Share Posted March 27, 2017 (edited) 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 March 27, 2017 by Manny Further feedback Link to comment Share on other sites More sharing options...
dsonesuk Posted March 27, 2017 Share Posted March 27, 2017 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. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now