jQuery UI themes and HTML tables
dochoffiday's answer is a great starting point, but for me it did not cut it (the CSS part needed a buff) so I made a modified version with several improvements.
See it in action, then come back for 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) - the
.livecall was replaced with the recommended.onfor jQuery 1.7 upwards - the explicit conditional has been replaced by
.toggleClass(a terser equivalent) - code that sets the misleadingly-named CSS class
firston table cells has been removed - the code that dynamically adds
.last-childto the last table row is necessary to fix a visual glitch on Internet Explorer 7 and Internet Explorer 8; for browsers that support:last-childit is not necessary
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 have tested this on Internet Explorer 7 and upwards, Firefox 11 and Google Chrome 18 and confirmed that it works perfectly. I have not tested reasonably earlier versions of Firefox and Chrome or any version of Opera; however, those browsers are well-known for good CSS support and since we are not using any bleeding-edge functionality here I assume it will work just fine there as well.
If you are not interested in Internet Explorer 7 support there is one CSS attribute (introduced with the star hack) that can go.
If you are not interested in Internet Explorer 8 support either, the CSS and JavaScript related to adding and targeting the last-child CSS class can go as well.
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; }
Why noy just use the theme styles in the 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 don't need to use any code...