| # | First Name | Last Name | Age | Profile | ||
|---|---|---|---|---|---|---|
| Clients | 1 | Taro | Yamada | 34 | link | |
| Clients | 2 | Hanako | Hayashi | 19 | link | |
| Clients | 3 | Karen | Takeda | 23 | link | |
| Clients | 4 | Keiko | Uchida | 44 | link | |
| Total | 5 | Total | 2h 34min 32s | |||
CSS to collapse TABLE border
table {
border-collapse: collapse; border-spacing: 0;}
<table>
<caption>My Clients, 2024</caption>
<thead>
<tr>
<td></td>
<td></td>
<td>
<select name="" id="">
<option value="">First name</option>
<option value="">Nickname</option>
<option value="">Family history</option>
<option value="">Nationality</option>
</select>
</td>
<td>
<select name="" id="">
<option value="">Family name</option>
<option value="">Nickname</option>
<option value="">Family history</option>
<option value="">Nationality</option>
</select>
</td>
<td>
<select name="" id="">
<option value="">Age</option>
<option value="">Nickname</option>
<option value="">Family history</option>
<option value="">Nationality</option>
</select>
</td>
<td>
<input type="search" name="" id="" value="Search here!">
</td>
</tr>
<tr>
<th></th>
<th> # </th>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Profile</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Clients</th>
<td>1</td>
<td>Taro</td>
<td>Yamada</td>
<td>34</td>
<td><a href="#">link</a></td>
</tr>
<tr>
<th scope="row">Clients</th>
<td>2</td>
<td>Hanako</td>
<td>Hayashi</td>
<td>19</td>
<td><a href="#">link</a></td>
</tr>
<tr>
<th scope="row">Clients</th>
<td>3</td>
<td>Karen</td>
<td>Takeda</td>
<td>23</td>
<td><a href="#">link</a></td>
</tr>
<tr>
<th scope="row">Clients</th>
<td>4</td>
<td>Keiko</td>
<td>Uchida</td>
<td>44</td>
<td><a href="#">link</a></td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Total</th>
<td> 5 </td>
<td colspan="2"></td>
<td></td>
<th scope="row">Total</th>
<td>2h 34min 32s</td>
</tr>
</tfoot>
</table>