时间戳

首页 > 解决方案 > 将表头与引导程序 4 上的表内容对齐

html - 将表头与引导程序 4 上的表内容对齐

问题描述

我想知道一种将表头与表内容对齐的方法

实际结果如下： 实际结果

如您所见，它们没有对齐。我需要在没有固定宽度的情况下对齐列。

标题栏应该占据所有剩余的宽度。

这是我的实际代码：

<div class="table-responsive">
    <table class="table table-bordered">
        <thead>
            <tr class="d-flex">
                <th scope="col" class="col-auto"><i class="fas fa-folder fa-lg"></i></th>
                <th scope="col" class="col">Title</th>
                <th scope="col" class="col-auto">Author</th>
                <th scope="col" class="col-auto">NB</th>
                <th scope="col" class="col-auto">Last activity</th>
            </tr>
        </thead>
        <tbody>
            <tr class="d-flex">
                <td scope="row"><a href=""><i class="fas fa-folder fa-lg"></i></a></td>
                <td class="col"><a href="">flap flap flap</a></td>
                <td><a href="">Dushy</a></td>
                <td>14</td>
                <td>03:20:32</td>
            </tr>
        </tbody>
    </table>
</div>

谢谢你的帮助！

标签： htmlcsstwitter-bootstrap

解决方案

这是因为你使用col-auto类。col-auto用类替换col类。

<div class="table-responsive">
    <table class="table table-bordered">
        <thead>
            <tr class="d-flex">
                <th scope="col" class="col-auto"><i class="fas fa-folder fa-lg"></i></th>
                <th scope="col" class="col">Title</th>
                <th scope="col" class="col">Author</th>
                <th scope="col" class="col">NB</th>
                <th scope="col" class="col">Last activity</th>
            </tr>
        </thead>
        <tbody>
            <tr class="d-flex">
                <td scope="col" class="col-auto"><a href=""><i class="fas fa-folder fa-lg"></i></a></td>
                <td scope="col" class="col"><a href="">flap flap flap</a></td>
                <td scope="col" class="col"><a href="">Dushy</a></td>
                <td scope="col" class="col">14</td>
                <td scope="col" class="col">03:20:32</td>
            </tr>
        </tbody>
    </table>
</div>

推荐阅读