CSS Styled Data Table

[litewarez]

Hey just thought id share this table with you all.. just to show you that even tables can be sexy



CSS:

.TableDiv{width:600px;}
.TableDiv .root_table{border:1px solid #ccc;padding:0;width:100%}
.TableDiv .root_table th{background-color:#e0e0e0;border:1px solid #bababa;border-left:0;border-top-color:#fefefe;font-size:11px;font-weight:normal;line-height:1em;padding:6px 5px;white-space:nowrap}

.TableDiv .root_table th a{color:#000;display:block;margin:-6px -5px;padding:6px 5px}

.TableDiv .root_table th a:hover{background-color:#d0d0d0;text-decoration:none}

.TableDiv .root_table th a.asc,.TableDiv .root_table th a.desc{background-color:#d0d0d0}

.TableDiv .root_table th a span{display:inline-block}

.TableDiv .root_table th a .dir_arrow{background-position:left top;background-repeat:no-repeat;margin-left:4px;margin-bottom:-1px;overflow:hidden;height:7px;width:7px}

.TableDiv .root_table td{background-color:#fff;padding:8px 5px;vertical-align:middle}

.TableDiv tr.even td{background-color:#f5f5f5}
.TableDiv input.checkbox,
.TableDiv th input{float:left;margin:0 0 0 5px}

.TableDiv #totals td{background-color:#fff;border-top:1px solid #dfdfdf;font-weight:bold}

.TableDiv #totals td.message{border-top:0;font-weight:normal;padding-left:10px;text-align:left}

.TableDiv .root_table .last_column{border-right:0}

HTML Block:

<div class="TableDiv">
	<table class="root_table">
    	<thead class="">
        	<tr>
	        	<th><a href="#" class="asc"><span>Item 1</span></a></th>
    	        <th><a href="#"><span>Item 1</span></a></th>
        	    <th><a href="#"><span>Item 1</span></a></th>
            	<th><a href="#"><span>Item 1</span></a></th>
			</tr>
        </thead>
        <tbody>
        	<tr class="even">
            	<td>Some Info</td>
                <td>Some Info</td>
                <td>Some Info</td>
                <td>Some Info</td>
			</tr>
        	<tr class="">
            	<td>Some Info</td>
                <td>Some Info</td>
                <td>Some Info</td>
                <td>Some Info</td>
			</tr>
        	<tr class="even">
            	<td>Some Info</td>
                <td>Some Info</td>
                <td>Some Info</td>
                <td>Some Info</td>
			</tr>
        	<tr class="">
            	<td>Some Info</td>
                <td>Some Info</td>
                <td>Some Info</td>
                <td>Some Info</td>
			</tr>
            <tr id="totals"><td colspan="4">Totals here</td></tr>
        </tbody>
    </table>
</div>

litewarez Reviewed by litewarez on 11th Dec 2009. CSS Styled Data Table Hey just thought id share this table with you all.. just to show you that even tables can be sexy :D http://www.imgcentre.com/images/icsnap786116919.png CSS: .TableDiv{width:600px;} .TableDiv .root_table{border:1px solid #ccc;padding:0;width:100%} .TableDiv .root_table th{background-color:#e0e0e0;border:1px solid #bababa;border-left:0;border-top-color:#fefefe;font-size:11px;font-weight:normal;line-height:1em;padding:6px 5px;white-space:nowrap} Rating: 5