表格,本身很麻烦。做响应式表格更麻烦。
目前我采用下面这个方法,我认为是最佳实践:
1、小屏幕可以水平滚动表格:
把表格放到这样的div
里就可以了:
html
<div class="overflow-x-auto w-full">
2、小屏幕隐藏不重要的栏位:
html
<thead>
<tr>
<th>Name</th>
<th class="hidden md:table-cell">Favorite Color</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hart Hagerty</td>
<td class="hidden md:table-cell">Purple</td>
</tr>
</tbody>