如何为Tailwind表格的thead与tbody添加内边距

直接给表格的<th>和<td>元素添加Tailwind内边距类就能解决文本贴边框的问题，推荐用py-3 px-4（垂直方向3单位内边距，水平方向4单位，可根据需求调整数值，比如py-2 px-3）。

修改后的完整代码： #

<div>
    <div>
        <div class="font-bold text-2xl">History</div>
        <div class="text-xs font-medium text-gray-500">Last 6 months</div>
    </div>
    <table class="table-auto w-full">
        <thead class="bg-white">
            <tr>
                <!-- 给表头单元格添加内边距 -->
                <th class="text-left py-3 px-4">Image</th>
                <th class="text-left py-3 px-4">Type</th>
                <th class="text-left py-3 px-4">Time</th>
                <th class="text-left py-3 px-4">Ammount</th>
                <th class="text-left py-3 px-4">Status</th>
            </tr>
        </thead>
        <tbody>
            <tr class="border-b border-gray-100">
                <!-- 给表体单元格添加内边距，同时给行加分隔边框 -->
                <td class="py-3 px-4">Image</td>
                <td class="py-3 px-4">Car Insurace</td>
                <td class="py-3 px-4">10:42:23 AM</td>
                <td class="py-3 px-4">2500$</td>
                <td class="py-3 px-4">Completed</td>
            </tr>
        </tbody>
    </table>
</div>

额外优化建议： #

• 给表头<th>加text-gray-700 font-medium类，增强文字与白色背景的对比度
• 给表体<tr>加hover:bg-gray-50类，实现鼠标悬停高亮，提升交互体验

内容的提问来源于stack exchange，提问作者rameez khan