JSFiddle - React, Tailwind, and code Playground

by jbb43

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css">
<table>
    <thead>
        <tr>
            <th>Header Column</th>
            <th>Column 2</th>
            <th>Column 3</th>
            <th>Column 4</th>
        </tr>
    </thead>
    <tbody>
        <tr><th>Header</th><td>Cell 2</td><td>Cell 3</td><td>Cell 4</td></tr>
        <tr><th>Header</th><td>Cell 2</td><td>Cell 3</td><td>Cell 4</td></tr>
        <tr><th>Header</th><td>Cell 2</td><td>Cell 3</td><td>Cell 4</td></tr>
        <tr><th>Header</th><td>Cell 2</td><td>Cell 3</td><td>Cell 4</td></tr>
    </tbody>
</table>

CSS

/* BASIC CSS STYLING TO MAKE IT LOOK PRETTIER */
table { margin: 5em; }
td, th { padding: 2px 4px; }


/* IE7: 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
/* IE7: does not support "inherit", so use a MS proprietary expression along with an IE <= 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) */
/* IE7, IE8: 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) */
/* IE8 BUG: if these (unsupported) selectors are added to a rule, other selectors for that rule will stop working as well! */
/* IE9+, FF, Chrome: make...

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");
        });
    };
    
    $("table").styleTable();
})(jQuery);