- Bootstrap响应式Web前端开发
- 王红 秦海玉 侯勇主编
- 247字
- 2025-02-07 17:07:34
2.2.1 基本的表格
Bootstrap中设置了表格的基本样式。若用户没有为表格定义表格样式,则默认表格的底部外边距为1rem,文字颜色为#212529。具体表格样式如图2-22所示。

基本的表格

图2-22 Bootstrap表格的基本样式
【例2-16】使用Bootstrap制作会员信息统计表。实现时,为了表格美观,设置表格顶部外边距为3rem(仅需为<table>标签设置类名为.mt-5),自定义表格的背景样式。具体代码如下:
<style type="text/css"> body { background: url("images/24.jpg") no-repeat; } </style> <table class="table mt-5"> <thead> <th>姓名</th><th>会员号</th><th>会员类型</th><th>会员积分</th> </thead> <tbody> <tr><td>小仙女</td><td>v08001</td><td>白金会员</td><td>50</td></tr> <tr><td>ai小哥哥</td><td>v08034</td><td>钻石会员</td><td>3551</td></tr> <tr><td>一信鸽</td><td>v08021</td><td>黄金会员</td><td>290</td></tr> <tr><td>猫喵喵</td><td>v08002</td><td>白金会员</td><td>70</td></tr> </tbody> </table>
编写完代码后,在浏览器中运行本例,具体运行效果如图2-23所示。

图2-23 Bootstrap默认表格样式