JSFiddle - React, Tailwind, and code Playground

by Jessie Lau

HTML

<table >
    <thead>
        <tr>
            <th>name</th>
            <th>age</th>
            <th>sexe</th>
            <th>country</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Miaoooo</td>
            <td>18</td>
            <td>male</td>
            <td>swiss</td>
        </tr>
        <tr>
            <td>Miao</td>
            <td>16</td>
            <td>female</td>
            <td>China</td>
        </tr>
        <tr>
            <td>MiaoMiao</td>
            <td>20</td>
            <td>miooo</td>
            <td>france</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan=4>Miaoooooooooo</td>
        </tr>
    </tfoot>
</table>

CSS

th {
	font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica,
	sans-serif;
	color: #6D929B;
	border-right: 1px solid #C1DAD7;
	border-bottom: 1px solid #C1DAD7;
	border-top: 1px solid #C1DAD7;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-align: left;
	padding: 6px 6px 6px 12px;
	background: #CAE8EA url(images/bg_header.jpg) no-repeat;
}

th.nobg {
	border-top: 0;
	border-left: 0;
	border-right: 1px solid #C1DAD7;
	background: none;
}
th.spec {	
	border-left: 1px solid #C1DAD7;
	border-top: 0;
	background: #fff url(images/bullet1.gif) no-repeat;
	font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica,
	sans-serif;
}

th.specalt {
	border-left: 1px solid #C1DAD7;
	border-top: 0;
	background: #f5fafa url(images/bullet2.gif) no-repeat;
	font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica,
	sans-serif;
	color: #B4AA9D;
}
td {
	border-right: 1px solid #C1DAD7;
	border-bottom: 1px solid #C1DAD7;
	background: #fff;
	padding: 6px 6px 6px 12px;
	color: #6D929B;
}


td.alt {
	background: #F5FAFA;
	color: #B4AA9D;
}