bootstrap4怎么设置表格

介绍bootstrap4表格的设置方法

Bootstrap是一组用于快速web开发的工具集，Bootstrap4是最新版本的Bootstrap。Bootstrap4提供了一种简单的方法来设置响应式表格。Bootstrap4中表格元素是“table”，其如何显示在不同设备上是由类名控制的，这些类名可用于设置表头、表体以及表格宽度和边框等方面的样式

如何设置响应式表格

为了设置一个响应式表格，你必须在HTML页面中包含Bootstrap库，并在table元素上添加“table”类名。示例代码如下：

    
        <table class="table">
            <!-- table elements -->
        </table>
    

如何设置表格头的样式

Bootstrap提供了两个类名用于设置表格头的样式，分别是“thead-light”和“thead-dark”，它们用于设置浅色和深色表头的样式。示例代码如下：

    
        <table class="table">
            <thead class="thead-light">
                <tr>
                    <th>#</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>Mark</td>
                    <td>Otto</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Jacob</td>
                    <td>Thornton</td>
                </tr>
            </tbody>
        </table>
    

如何设置表格的宽度和边框样式

Bootstrap提供了两个类名用于设置表格的宽度和边框样式，分别是“table-bordered”和“table-sm”，它们用于设置带边框的表格和小尺寸的表格。示例代码如下：

    
        <table class="table table-bordered">
            <!-- table elements -->
        </table>
        
        <table class="table table-sm">
            <!-- table elements -->
        </table>