Bootstarp表格

2023-11-14 08:35:58

基本实例

为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。这种方式看起来很多余！？但是我们觉得，表格元素使用的很广泛，如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件，所以我们选择将此样式独立出来。

<table class="table">
  ...
</table>

条纹状表格

通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。

跨浏览器兼容性---条纹状表格是依赖 `:nth-child` CSS 选择器实现的，而这一功能不被 Internet Explorer 8 支持。

<table class="table table-striped">
  ...
</table>

带边框的表格

添加 .table-bordered 类为表格和其中的每个单元格增加边框。

<table class="table table-bordered">
  ...
</table>

鼠标悬停

通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。

<table class="table table-hover">
  ...
</table>

紧缩表格

通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。

<table class="table table-condensed">
  ...
</table>

状态类

通过这些状态类可以为行或单元格设置颜色。

'''
Class      描述
.active    鼠标悬停在行或单元格上时所设置的颜色
.success   标识成功或积极的动作
.info      标识普通的提示信息或动作
.warning   标识警告或需要用户注意
.danger    标识危险或潜在的带来负面影响的动作
'''

<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

向使用辅助技术的用户传达用意

通过为表格中的一行或一个单元格添加颜色而赋予不同的意义只是提供了一种视觉上的表现，并不能为使用辅助技术 -- 例如屏幕阅读器 -- 浏览网页的用户提供更多信息。因此，请确保通过颜色而赋予的不同意义可以通过内容本身来表达（即在相应行或单元格中的可见的文本内容）；或者通过包含额外的方式 -- 例如应用了 .sr-only 类而隐藏的文本 -- 来表达出来。

响应式表格

将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。

垂直方向的内容截断

响应式表格使用了 overflow-y: hidden 属性，这样就能将超出表格底部和顶部的内容截断。特别是，也可以截断下拉菜单和其他第三方组件。

Firefox 和 `fieldset` 元素

Firefox 浏览器对 fieldset 元素设置了一些影响 width 属性的样式，导致响应式表格出现问题。可以使用下面提供的针对 Firefox 的 hack 代码解决，但是以下代码并未集成在 Bootstrap 中：

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}
更多信息请参考 this Stack Overflow answer.

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device=width, initial-scale=1 user-scalable=0">
    <link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script src="bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</head>
<body>

    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <table class="table table-bordered table-hover">
                    <thead>
                        <tr>
                            <th class="text-center">ID</th>
                            <th class="text-center">Username</th>
                            <th class="text-center">Password</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="active">
                            <td class="text-center">001</td>
                            <td class="text-center">mike</td>
                            <td class="text-center">123456</td>
                        </tr>
                        <tr class="success">
                            <td class="text-center">002</td>
                            <td class="text-center">jack</td>
                            <td class="text-center">123456</td>
                        </tr>
                        <tr class="info">
                            <td class="text-center">003</td>
                            <td class="text-center">mary</td>
                            <td class="text-center">123456</td>
                        </tr>
                        <tr class="warning">
                            <td class="text-center">004</td>
                            <td class="text-center">martin</td>
                            <td class="text-center">123456</td>
                        </tr>
                        <tr class="danger">
                            <td class="text-center">005</td>
                            <td class="text-center">jason</td>
                            <td class="text-center">123456</td>
                        </tr>
                        <tr>
                            <td class="text-center success">006</td>
                            <td class="text-center info">admin</td>
                            <td class="text-center warning">123456</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

</body>
</html>

表格
    <table class="table table-hover table-striped table-bordered">
        <thead>
            <tr>
                <td>序号</td>
                <td>姓名</td>
                <td>密码</td>
                <td>爱好</td>
            </tr>
        </thead>
        <tbody>
            <tr class="success">
                <td class="active">1</td>
                <td class="warning">jason</td>
                <td class="danger">123</td>
                <td class="info">study</td>
            </tr>

码农公寓

表格