JSFiddle - React, Tailwind, and code Playground
HTML
<div class="table">
<table>
<thead>
<tr>
<th>Task Details</th>
<th class="center">wahaha</th>
<th class="center">Subjects</th>
</tr>
</thead>
<tbody>
<tr>
<td>Create pretty table design</td>
<td class="center">100%</td>
<td class="center">Yes</td>
</tr>
<tr>
<td>Take the dog for a walk</td>
<td class="center">100%</td>
<td class="center">Yes</td>
</tr>
<tr>
<td>Waste half the day on Twitter</td>
<td class="center">20%</td>
<td class="center">No</td>
</tr>
<tr>
<td>Feel inferior after viewing Dribbble</td>
<td class="center">80%</td>
<td class="center">No</td>
</tr>
<tr>
<td>Vince a "to-do" list</td>
<td class="center">100%</td>
<td class="center">Yes</td>
</tr>
<tr>
<td>Vow to complete personal project</td>
<td class="center">23%</td>
<td class="center">Yes</td>
</tr>
<tr>
<td>Procrastinate</td>
<td class="center">80%</td>
<td class="center">No</td>
</tr>
</tbody>
</table>
</div>
CSS
.center {
text-align: center;
}
.table {
font-family: Lucida Grande;
font-size: 11px;
color: #656565;
width: 500px;
border: 1px solid #d5d5d5;
-webkit-border-radius: 3px;
}
table {
width: 100%;
}
thead th {
padding: 15px 20px;
background: #e8e9eb;
border-bottom: 1px solid #d5d5d5;
font-weight: bold;
}
thead th:first-child {
width: 60%;
}
tbody td {
padding: 15px 20px;
border-right: 1px solid #d5d5d5;
border-bottom: 1px solid #d5d5d5;
}
tbody td:last-child {
border-right: none;
}
tbody tr:nth-child(even) td {
background: #f8f8f8;
}
tbody tr:last-child td {
border-bottom: none;
}