css 如何删除表中td和tr的多余空间？

k2fxgqgv 于 2023-05-02 发布在其他

关注(0)|答案(1)|浏览(167)

我有这个表，需要删除多余的空间，这样我就可以向表中添加其他列，而不必垂直滚动，这样空间就得到了完美的利用。
代码如下：

<table id="" class="table table-report -mt-2">

    <thead>
        <tr>
            <th class="whitespace-nowrap">NO</th>
            <th class="text-center whitespace-nowrap cursor-pointer sortup">User name <i  class="mx-1 fa-solid fa-sort-up sortup"></i>
            </th>
            <th class="text-center whitespace-nowrap sortup">Email <i  class="mx-1 fa-solid fa-sort-up sortup"></i></th>
            <th class="whitespace-nowrap sortup">Date <i  class="mx-1 fa-solid fa-sort-up sortup"></i></th>
            <th class="whitespace-nowrap sortup">Time <i  class="mx-1 fa-solid fa-sort-up sortup"></i></th>
        </tr>
    </thead>
    <tbody id="">
        

        <tr class="intro-x">

            <td class="" id="">
                <input id="" type="checkbox" value="" class=" w-4 mr-5 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"> Test User </td>
            <td class="text-center"> Test Email</td>
            <td class="text-center">
        
                    Test Date
    
            </td>
            <td>
            Test Time
            </td>

        </tr>
    
    </tbody>
</table>

下面是一个截图：

css

来源：https://stackoverflow.com/questions/76137620/how-to-remove-extra-space-of-td-and-tr-in-table

1条答案

按热度按时间

ukqbszuj1#

要删除表格单元格之间的多余空间，并允许添加新列而不会导致水平滚动，您可以向表格添加以下CSS：

table {
    border-collapse: collapse;
}

td, th {
    padding: 0;
    border: none;
}

这将折叠单元格之间的边框并删除任何填充，从而使布局更紧凑。如果单元格之间需要一些空间，可以调整填充值。

赞(0）回复(0）举报 2023-05-02

我来回答

css 如何删除表中td和tr的多余空间？

1条答案

相关问题

热门标签

最新问答