JQuery UI themes and HTML tables

Question

Is there a way to use an HTML table (CSS) to use jQuery CSS theme themes?

All my components look as if they belong together, with the exception of my HTML table, which looks different.

Answer 1

There are many resources there:

Plugins with ThemeRoller support:

jqGrid

DataTables.net

UPDATE: this is what I put together to 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> 

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

Answer 2

dochoffiday's answer is a great starting point, but it didn’t shorten it for me (some CSS needed a buff), so I made a modified version with several improvements.

Look in action, then return the description .

Javascript

 (function ($) { $.fn.styleTable = function (options) { var defaults = { css: 'ui-styled-table' }; options = $.extend(defaults, options); return this.each(function () { $this = $(this); $this.addClass(options.css); $this.on('mouseover mouseout', 'tbody tr', function (event) { $(this).children().toggleClass("ui-state-hover", event.type == 'mouseover'); }); $this.find("th").addClass("ui-state-default"); $this.find("td").addClass("ui-widget-content"); $this.find("tr:last-child").addClass("last-child"); }); }; })(jQuery); 

Differences with the original version:

• The default CSS class has been changed to ui-styled-table (it sounds more consistent)
• .live call .live been replaced by recommended .on for jQuery 1.7 up
• explicit condition replaced by .toggleClass (equivalent terms)
• code that sets the erroneously named CSS first class in table cells has been removed
• code that dynamically adds .last-child to the last row of the table is needed to correct a visual glitch in Internet Explorer 7 and Internet Explorer 8; for browsers supporting :last-child not needed

CSS

 /* Internet Explorer 7: setting "separate" results in bad visuals; all other browsers work fine with either value. */ /* If set to "separate", then this rule is also needed to prevent double vertical borders on hover: table.ui-styled-table tr * + th, table.ui-styled-table tr * + td { border-left-width: 0px !important; } */ table.ui-styled-table { border-collapse: collapse; } /* Undo the "bolding" that jQuery UI theme may cause on hovered elements /* Internet Explorer 7: does not support "inherit", so use a MS proprietary expression along with an Internet Explorer <= 7 targeting hack to make the visuals consistent across all supported browsers */ table.ui-styled-table td.ui-state-hover { font-weight: inherit; *font-weight: expression(this.parentNode.currentStyle['fontWeight']); } /* Initally remove bottom border for all cells. */ table.ui-styled-table th, table.ui-styled-table td { border-bottom-width: 0px !important; } /* Hovered-row cells should show bottom border (will be highlighted) */ table.ui-styled-table tbody tr:hover th, table.ui-styled-table tbody tr:hover td { border-bottom-width: 1px !important; } /* Remove top border if the above row is being hovered to prevent double horizontal borders. */ table.ui-styled-table tbody tr:hover + tr th, table.ui-styled-table tbody tr:hover + tr td { border-top-width: 0px !important; } /* Last-row cells should always show bottom border (not necessarily highlighted if not hovered). */ /* Internet Explorer 7, Internet Explorer 8: selector dependent on CSS classes because of no support for :last-child */ table.ui-styled-table tbody tr.last-child th, table.ui-styled-table tbody tr.last-child td { border-bottom-width: 1px !important; } /* Last-row cells should always show bottom border (not necessarily highlighted if not hovered). */ /* Internet Explorer 8 BUG: if these (unsupported) selectors are added to a rule, other selectors for that rule will stop working as well! */ /* Internet Explorer 9 and later, Firefox, Chrome: make sure the visuals are working even without the CSS classes crutch. */ table.ui-styled-table tbody tr:last-child th, table.ui-styled-table tbody tr:last-child td { border-bottom-width: 1px !important; } 

Notes

I tested this in Internet Explorer 7 and above, Firefox 11 and Google Chrome 18 and confirmed that it works fine. I have not tested the earlier versions of Firefox and Chrome or any version of Opera ; however, these browsers are well known for good CSS support, and since we are not using any bleeding functionality, I assume it will work very well there.

If you are not interested in supporting Internet Explorer 7, there is one CSS attribute (introduced by breaking a star) that can go.

If you are not interested in supporting Internet Explorer 8, CSS and JavaScript related to adding and targeting the last-child CSS class may also work.

Answer 3

Why does noy just use theme styles in a table? i.e.

 <table> <thead class="ui-widget-header"> <tr> <th>Id</th> <th>Description</th> </td> </thead> <tbody class="ui-widget-content"> <tr> <td>...</td> <td>...</td> </tr> . . . </tbody> </table> 

And you do not need to use any code ...