如何清除HTML表格中td与tr的多余空白？

问题分析 #

当前表格的td和tr存在多余空白（包括HTML文本中的冗余空格、换行，以及默认内边距），导致横向空间被浪费，无法添加更多列而不触发垂直滚动。

解决方案 #

从清理HTML冗余内容和调整单元格内边距两方面优化，以下是修改后的代码：

<table class="table table-report -mt-2">
    <thead>
        <tr>
            <th class="whitespace-nowrap p-2">NO</th>
            <th class="text-center whitespace-nowrap cursor-pointer sortup p-2">
                User name <i class="mx-1 fa-solid fa-sort-up sortup"></i>
            </th>
            <th class="text-center whitespace-nowrap sortup p-2">
                Email <i class="mx-1 fa-solid fa-sort-up sortup"></i>
            </th>
            <th class="whitespace-nowrap sortup p-2">
                Date <i class="mx-1 fa-solid fa-sort-up sortup"></i>
            </th>
            <th class="whitespace-nowrap sortup p-2">
                Time <i class="mx-1 fa-solid fa-sort-up sortup"></i>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr class="intro-x">
            <td class="p-2">
                <input type="checkbox" value="" class="w-4 mr-2 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2">
            </td>
            <td class="text-center p-2">Test User</td>
            <td class="text-center p-2">Test Email</td>
            <td class="text-center p-2">Test Date</td>
            <td class="p-2">Test Time</td>
        </tr>
    </tbody>
</table>

关键修改点 #

• 清理冗余空白：删除td内文本前后的空格、多余换行（比如Test Date周围的空行），消除无意义的空白占用。
• 压缩单元格内边距：给所有th和td添加p-2类（也可根据需求用更小的p-1），替代默认的较大内边距，直接减少单元格的垂直/横向空间。
• 优化复选框间距：将复选框的mr-5改为mr-2，去掉不必要的右侧空白。

额外优化建议 #

如果需要进一步压缩空间：

• 用py-1 px-2单独控制垂直、水平内边距，实现更精准的空间调整。
• 若内容允许换行，可移除部分whitespace-nowrap类，让内容自动换行节省横向空间。

内容的提问来源于stack exchange，提问作者The Code Whisperer