PHP Laravel NGINX html css Bootstrap Python Symfony Apache Windows linux jquery Django ASP vanilla Slim vagrant docker Homestead MySQL Redis Git SVN ssh Root vim PhpStorm Pycharm sass less PHP Laravel android html css Vue Angular React NGINX html css Javascript

Bootstrap 4 自定义表格列宽度

原创

原创不易 ~ 转载请注明出处哦

Bootstrap目前已经发布了4.1.x正式版本,相比起Bootstrap 3来说,简直是一个质的飞跃,在这里强烈建议还在使用旧版本的朋友升级到4.1.x

好了,今天我们要来讲解一下,在Bootstrap 4(以下简称BS4)中如何自定义表格的列宽度。

我们的示例中使用的是rowcol等一系列类名(class)来完成表格宽度的自定义,当然也可以直接自定义css,不过这就不属于我们的讨论范畴了。


首先我们建立一张只包含了颜色样式的表格:

<div class="container mt-5">              
    <!-- First table without widths classes -->              
    <table class="table table-bordered text-white">              
        <thead>              
            <tr class="bg-primary">              
                <th>#</th>              
                <th>First</th>              
                <th>Second</th>              
                <th>Third</th>              
            </tr>              
        </thead>              
        <tbody>              
            <tr class="bg-dark">              
                <th>1</th>              
                <td>This is a remarkably long phrase.</td>              
                <td>Javascript</td>              
                <td>Python</td>              
            </tr>              
            <tr class="bg-secondary">              
                <th>2</th>              
                <td>Having fun with Bootstrap 4!</td>              
                <td>CSS</td>              
                <td>Bootstrap</td>              
            </tr>              
            <tr class="bg-success">              
                <th>3</th>              
                <td>PHP</td>              
                <td>npm</td>              
                <td>nodejs</td>              
            </tr>              
        </tbody>              
    </table>              
    <!-- End first table -->              
</div>

Table with variable widths
可以看到,表格的列都是不同宽度。

那么我们来演示一下如何将表格所有列都设置成一样宽度。

我们建立第二张表格,在表格里添加一些rowcol等类名:

<div class="container mt-5">              
    <!-- Second table with widths classes -->              
    <table class="table table-bordered row mx-0 text-white">              
        <thead class="w-100">              
            <tr class="row mx-0 bg-primary">              
                <th class="col-3">#</th>              
                <th class="col-3">First</th>              
                <th class="col-3">Last</th>              
                <th class="col-3">Handle</th>              
            </tr>              
        </thead>              
        <tbody class="w-100">              
            <tr class="row mx-0 bg-dark">              
                <th class="col-3">1</th>              
                <td class="col-3">This is a remarkably long phrase.</td>              
                <td class="col-3">Javascript</td>              
                <td class="col-3">Python</td>              
            </tr>              
            <tr class="row mx-0 bg-secondary">              
                <th class="col-3">2</th>              
                <td class="col-3">Having fun with Bootstrap 4!</td>              
                <td class="col-3">CSS</td>              
                <td class="col-3">Bootstrap</td>              
            </tr>              
            <tr class="row mx-0 bg-success">              
                <th class="col-3">3</th>              
                <td class="col-3">PHP</td>              
                <td class="col-3">npm</td>              
                <td class="col-3">nodejs</td>              
            </tr>              
        </tbody>              
    </table>              
    <!-- End second table -->              
</div>

Table rows with same widths
可以看到,我们给tabletr加上了rowtheadtbody使用了w-100让其占满整个表格长度,然后thtd全部使用了col-3使每列宽度一致。

我们来看一下两张表格比对图:

Comparison

注意,如果你需要不同的列宽度,可以根据你的需求相应更改col-3为其他长度,例如col-4,但是需要保证所有列长度相加正好为col-12的长度,并且需要注意,th和对应td需要相同的类才能保持宽度一致。

另外,通常在使用row的时候记得加上mx-0,否则会出现margin诡异的问题,大家可以自己测试。

由于中文字体的padding问题,如果遇到单行显示不下的情况,可以在适当的单元中修改默认的padding(例如加上px-0

好了,今天就讲解到这里,有问题欢迎指正与交流。


正在加载验证码......
请先完成验证
2018-06-20 01:53:23 dfwuhengbo@163.com
对于动态生成的列,可能有很多很多的列,所以需要滚动条,我如何去设置列宽?列头和首列如何固定?
2018-06-20 07:58:58 492617424@qq.com 回复 dfwuhengbo@163.com
每一列中的单个cell宽度都是一样的,动态生成表格的时候,只需要循环输出每一个tr即可,比如php中,使用foreach输出每一行,行内根据需求放入相应宽度的td
列头直接静态就可以了,首列可以根据你的数据在循环里输出。