htmljquery-uihtml-tablethemesthemeroller

jQuery UI themes and HTML tables


Is there any way to theme an HTML table (CSS) with using the jQuery CSS themes?

All of my components look like they belong together except for my HTML table which looks different.


Solution

  • There are a bunch of resources out there:

    Plugins with ThemeRoller support:

    jqGrid

    DataTables.net

    UPDATE: Here is something I put together that will style the table:

    <script type="text/javascript">
    
        (function ($) {
            $.fn.styleTable = function (options) {
                var defaults = {
                    css: 'styleTable'
                };
                options = $.extend(defaults, options);
    
                return this.each(function () {
    
                    input = $(this);
                    input.addClass(options.css);
    
                    input.find("tr").live('mouseover mouseout', function (event) {
                        if (event.type == 'mouseover') {
                            $(this).children("td").addClass("ui-state-hover");
                        } else {
                            $(this).children("td").removeClass("ui-state-hover");
                        }
                    });
    
                    input.find("th").addClass("ui-state-default");
                    input.find("td").addClass("ui-widget-content");
    
                    input.find("tr").each(function () {
                        $(this).children("td:not(:first)").addClass("first");
                        $(this).children("th:not(:first)").addClass("first");
                    });
                });
            };
        })(jQuery);
    
        $(document).ready(function () {
            $("#Table1").styleTable();
        });
    
    </script>
    
    <table id="Table1" class="full">
        <tr>
            <th>one</th>
            <th>two</th>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
    </table>
    

    The CSS:

    .styleTable { border-collapse: separate; }
    .styleTable TD { font-weight: normal !important; padding: .4em; border-top-width: 0px !important; }
    .styleTable TH { text-align: center; padding: .8em .4em; }
    .styleTable TD.first, .styleTable TH.first { border-left-width: 0px !important; }