CSS Tables: Simple table

put title for tooltip in header row

by David McClelland

HTML

<div id="root_Grid-10">
    <div class="widget-content widget-dhxgrid data-nodata">
        <div class="dhxgrid-wrapper focus">
        <div class="dhtmlx-grid-container gridBox" id="root_grid-10-dhxgrid">
<table class="zui-table">
    <thead>
        <tr>
            <th><div class='hdrcell' title="Name">Name</div></th>
            <th><div class="hdrcell">Position</div></th>
            <th><div class="hdrcell">Height</div></th>
            <th><div class="hdrcell">Born</div></th>
            <th><div class="hdrcell">Salary</div></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>DeMarcus Cousins</td>
            <td>C</td>
            <td>6'11"</td>
            <td>08-13-1990</td>
            <td>$4,917,000</td>
        </tr>
        <tr>
            <td>Isaiah Thomas</td>
            <td>PG</td>
            <td>5'9"</td>
            <td>02-07-1989</td>
            <td>$473,604</td>
        </tr>
        <tr>
            <td>Ben McLemore</td>
            <td>SG</td>
            <td>6'5"</td>
            <td>02-11-1993</td>
            <td>$2,895,960</td>
        </tr>
        <tr>
            <td>Marcus Thornton</td>
            <td>SG</td>
            <td>6'4"</td>
            <td>05-05-1987</td>
            <td>$7,000,000</td>
        </tr>
        <tr>
            <td>Jason Thompson</td>
            <td>PF</td>
            <td>6'11"</td>
            <td>06-21-1986</td>
            <td>$3,001,000</td>
        </tr>
    </tbody>
</table>
            </div></div></div></div>

<button id="toLowerCase">toLowerCase</button><button id="toUpperCase">toUpperCase</button>

CSS

.zui-table {
    /*border: solid 1px #DDEEEE;*/
    border-collapse: collapse;
    border-spacing: 0;
    font: normal 13px Arial, sans-serif;
}
.zui-table thead th {
    background-color: #DDEFEF;
    /*border: solid 1px #DDEEEE;*/
    color: #336B6B;
    padding: 10px;
    text-align: left;
    text-shadow: 1px 1px 1px #fff;
}
.zui-table tbody td {
   /* border: solid 1px #DDEEEE;*/
    color: #333;
    padding: 10px;
    text-shadow: 1px 1px 1px #fff;
}

#root_Grid-10 .widget-dhxgrid .dhxgrid-wrapper{border-width:1px;border-color:#ff0000;border-style:solid;}

#root_Grid-10 .widget-dhxgrid .dhxgrid-wrapper.focus {border-width:2px;border-color:#3399ff;border-style:solid;}

JavaScript

$('#toLowerCase').click(function() {
    // Action goes here
   $('.zui-table').find('.hdrcell').css('text-transform', 'lowercase');
});
$('#toUpperCase').click(function() {
    // Action goes here
   $('.zui-table').find('.hdrcell').css('text-transform', 'uppercase');
});