Posted By

miohtama on 07/07/09

Tagged

Versions (?)

Last Edited at 07/07/09 06:34pm

Statistics

Viewed 1269 times

Favorited by 0 user(s)

Related snippets

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

/ Published in: JavaScript

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.

Highlighted TextExpand

/*  Add column index pseudoclasses to table cells.

A JQuery snippet to be executed after DOM model has been loaded.

Each table cell will be marked with a CSS class containing the cell's column number.
    This is to workaround the lack of nth-child pseudoclass CSS selector support in
    IE6, IE7 and IE8.
    
    Read this sad fact sheet:
    
    http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx
    
    This way we can style table columns without explictly settings classes
    for them in Kupu.
    
    <table>
        <tbody>
            <tr>
                <td>
                </td>
                <td>
                </td>
            </tr>
        </tbody>
    </table>
    
    will become
    
    <table>
        <tbody>
            <tr>
                <td class="column-1">
                </td>
                <td class="column-2">
                </td>
            </tr>
        </tbody>
    </table>
    
    Both <tbody><td> and <thead><th> elements will be fixed.
   
    Use the following CSS to style tables:
    
    table.course-schedule-table .column-1 {
        width: auto; 
    }

table.course-schedule-table .column-2 {
        width: 150px;
    }

table.course-schedule-table .column-3 {
        width: 150px;
    }
     
    @author Mikko Ohtamaa
    
    @license 3-clause BSD
    
    http://www.twinapex.com
    
*/

jq(createTableColumnPseudoClasses);

URL: http://www.twinapex.com

Report this snippet Tweet