Posted By

miohtama on 07/07/09


Tagged

css table width jquery styling cell selector column


Versions (?)

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


 / Published in: JavaScript
 

URL: http://www.twinapex.com

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.

  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);

Report this snippet  

You need to login to post a comment.