/*  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
    
*/

function createTableColumnPseudoClasses() {
    
    jq("tr").each( function()  {
        var counter = 1;
        jq(this).children("td,th").each( function()  {
            jq(this).addClass("column-" + counter);
            counter++;
        });
    });
}

jq(createTableColumnPseudoClasses);

/*  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
    
*/

function createTableColumnPseudoClasses() {
    
    console.log("foobarxxx");
    
    jq("tr").each( function()  {
        var counter = 1;
        jq(this).children("td,th").each( function()  {
            jq(this).addClass("column-" + counter);
            counter++;
        });
    });
}

jq(createTableColumnPseudoClasses);

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.

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

css, table, jquery

JavaScript