Advanced Search

Set table column widths using CSS, JQuery and automatically generated pseudoclasses

/ Published in: JavaScript
Save to your folder(s)
A javscript snipped which will mark each table cell with a CSS class containing the cell's column number. This allows you to set the table column widths using just one CSS rule and without hand editing the table HTML code. This is to workaround the lack of nth-child pseudoclass CSS selector in IE6, IE7 and IE8.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /*  Add column index pseudoclasses to table cells.
  2.  
  3.     A JQuery snippet to be executed after DOM model has been loaded.
  4.  
  5.     Each table cell will be marked with a CSS class containing the cell's column number.
  6.     This is to workaround the lack of nth-child pseudoclass CSS selector support in
  7.     IE6, IE7 and IE8.
  8.     
  9.     Read this sad fact sheet:
  10.     
  11.     http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx
  12.     
  13.     This way we can style table columns without explictly settings classes
  14.     for them in Kupu.
  15.     
  16.     <table>
  17.         <tbody>
  18.             <tr>
  19.                 <td>
  20.                 </td>
  21.                 <td>
  22.                 </td>
  23.             </tr>
  24.         </tbody>
  25.     </table>
  26.     
  27.     will become
  28.     
  29.     <table>
  30.         <tbody>
  31.             <tr>
  32.                 <td class="column-1">
  33.                 </td>
  34.                 <td class="column-2">
  35.                 </td>
  36.             </tr>
  37.         </tbody>
  38.     </table>
  39.     
  40.     Both <tbody><td> and <thead><th> elements will be fixed.
  41.    
  42.     Use the following CSS to style tables:
  43.     
  44.     table.course-schedule-table .column-1 {
  45.         width: auto; 
  46.     }
  47.  
  48.     table.course-schedule-table .column-2 {
  49.         width: 150px;
  50.     }
  51.  
  52.     table.course-schedule-table .column-3 {
  53.         width: 150px;
  54.     }
  55.      
  56.     @author Mikko Ohtamaa
  57.     
  58.     @license 3-clause BSD
  59.     
  60.     http://www.twinapex.com
  61.     
  62. */
  63.  
  64. function createTableColumnPseudoClasses() {
  65.  
  66.     jq("tr").each( function()  {
  67.         var counter = 1;
  68.         jq(this).children("td,th").each( function()  {
  69.             jq(this).addClass("column-" + counter);
  70.             counter++;
  71.         });
  72.     });
  73. }
  74.  
  75. jq(createTableColumnPseudoClasses);

URL: http://www.twinapex.com

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.