Jump to content

Search the Community

Showing results for tags 'colspan'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • HTML/XHTML
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • XSLT/XSL-FO
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Calendars

  • Community Calendar

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

Found 2 results

  1. Hello. The colspan command is being depreciated and i am wondering waht is the valid / new way to do a colspan using css (Validated on an html validator) I have a site with multiple lines of data ( 20-30+ ) in a table format & i want the information in one row to align vertically with the line below HOWEVER its getting too wide, so i want to move some information into the line below each row, and use colspan - to make it take up the whole row, EXAMPLE :- ROW1 - DATA1. ROW1 - DATA2. ROW1 - DATA3. ROW1A - LONG TEXT COVERNG WHOLE ROW ROW2 - DATA1. ROW2 - DATA2. ROW2 - DATA3. ROW2A - LONG TEXT COVERNG WHOLE ROW ROW3 - DATA1. ROW3 - DATA2. ROW3 - DATA3. ROW3A - LONG TEXT COVERNG WHOLE ROW
  2. 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.
×
×
  • Create New...