table coins arrondis

by polinux

HTML

<table summary="2007 Major IT Companies' Profit" id="rounded-corner">
    <thead>
    	<tr>
        	<th>Date</th>
            <th>km</th>
            <th>DĂ©tail</th>
            <th>Montant</th>
        </tr>
    </thead>
        <tfoot>
    	<tr>
        	<td class="rounded-foot-left" colspan="4"><em>The above data were fictional and made up, please do not sue me</em></td>
        	<td class="rounded-foot-right">&nbsp;</td>
        </tr>
    </tfoot>
    <tbody>
    	<tr>
            <td>01/04/2013</td>
            <td>020365</td>
            <td>azertyuio</td>
            <td>23.5</td>
        </tr>
    	<tr>
            <td>01/04/2013</td>
            <td>020365</td>
            <td>gghfhj ghghjghg hgjgjhghj</td>
            <td>23.5</td>
        </tr>
    </tbody>
</table>

CSS

#rounded-corner {
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 12px;
	margin: 45px;
	width: 480px;
	text-align: left;
	border-collapse: collapse;
}

th:first-child {
    -moz-border-radius: 6px 0 0 0;
    -webkit-border-radius: 6px 0 0 0;
    border-radius: 8px 0 0 0;
}

th:last-child {
    -moz-border-radius: 0 6px 0 0;
    -webkit-border-radius: 0 6px 0 0;
    border-radius: 0 8px 0 0;
}

#rounded-corner th {
	padding: 8px;
	font-weight: normal;
	font-size: 13px;
	color: #039;
	background: #b9c9fe;
}

#rounded-corner td {
	padding: 8px;
	background: #e8edff;
	border-top: 1px solid #fff;
	color: #669;
}

#rounded-corner tbody tr td:last-child {
    text-align:right;
}

#rounded-corner tbody tr:hover td {
	background: #d0dafd;
}