06 CSS通用样式-----表格

最新推荐文章于 2023-10-31 13:35:59 发布
最新推荐文章于 2023-10-31 13:35:59 发布
阅读量446 收藏 2
点赞数
文章标签： Bootstrap HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45240749/article/details/102851574
版权

CSS通用样式-----表格

优化表格

  Bootstrap3.0优化了表格结构标签，仅支持下面的表格标签及其样式优化设计：

  • table：定义表格容器，构建表格数据的框架
  • thead：定义表头容器
  • tbody：定义表格内容容器
  • tr：定义数据行结构
  • td：定义表格数据的单元，即定义单元格
  • th：定义每列（或行，依赖于放置的位置）所对应的标签
  • caption：定义表格标题，用于对表格进行描述和总结，对屏幕阅读器特有有用

  其他表格标签依然可以继续使用，但是Bootstrap3.0不再提供样式化，如tfooter、colgroup等。由于表格被广泛的使用，为了避免破坏其他插件中表格样式，Bootstrap规定为任意table标签添加.table类样式，才能为其赋予Bootstrap3.0表格优化效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格风格</title>
    <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
    <table class="table">
        <caption>表格标题</caption>
        <thead>
            <tr><th>标题1</th><th>标题2</th></tr>
        </thead>
        <tbody>
            <tr><td>内容1</td><td>内容2</td></tr>
        </tbody>
    </table>
</body>
</html>

默认风格

  Bootstrap优化了table标签的显示效果：

  • 通过border-collapse: collapse; 的声明，定义表单单线显示
  • 通过border-spacing: 0;的声明，定义表格内边距
  • 在大设备屏幕中（至少1200px）通过max-width: 100%，定义表格为100%宽度显示

  同时，为table标签定义了一个基本样式类table，引用该样式类，将会表格table标签添加基本样式：很少的内补（padding）空间，灰色的细水平分割线。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>默认表格风格</title>
    <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
    <table class="table">
        <tr>
            <th></th>
            <th>Chrome</th>
            <th>Firefox</th>
            <th>Internet expiorer</th>
            <th>Opera</th>
            <th>Safari</th>
        </tr>
        <tr scope = "row">
            <th>Andriod</th>
            <td>支持</td>
            <td>支持</td>
            <td>N/A</td>
            <td>不支持</td>
            <td>N/A</td>
        </tr>
        <tr scope = "row">
            <th>IOS</th>
            <td>支持</td>
            <td>N/A</td>
            <td>N/A</td>
            <td>不支持</td>
            <td>支持</td>
        </tr>
        <tr scope="row">
            <th>Mac os x</th>
            <td>支持</td>
            <td>支持</td>
            <td>N/A</td>
            <td>支持</td>
            <td>支持</td>
        </tr>
        <tr scope="row">
            <th>windows</th>
            <td>支持</td>
            <td>支持</td>
            <td>支持</td>
            <td>支持</td>
            <td>不支持</td>
        </tr>
    </table>
</body>
</html>

个性风格

斑马纹风格

  Bootstrap3.0定义了table-striped类样式，设计斑马纹样式，即实现表格数据行隔行换色效果。需要注意的是，该方法是通过:nth-child选择器为表格中的行添加奇数行并加背景色样式，由于IE8及其以下版本浏览器不支持:nth-child选择器，因此在使用的时候需要注意兼容性问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>默认表格风格</title>
    <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
    <table class="table table-striped">
        <tr>
            <th></th>
            <th>Chrome</th>
            <th>Firefox</th>
            <th>Internet expiorer</th>
            <th>Opera</th>
            <th>Safari</th>
        </tr>
        <tr scope = "row">
            <th>Andriod</th>
            <td>支持</td>
            <td>支持</td>
            <td>N/A</td>
            <td>不支持</td>
            <td>N/A</td>
        </tr>
        <tr scope = "row">
            <th>IOS</th>
            <td>支持</td>
            <td>N/A</td>
            <td>N/A</td>
            <td>不支持</td>
            <td>支持</td>
        </tr>
        <tr scope="row">
            <th>Mac os x</th>
            <td>支持</td>
            <td>支持</td>
            <td>N/A</td>
            <td>支持</td>
            <td>支持</td>
        </tr>
        <tr scope="row">
            <th>windows</th>
            <td>支持</td>
            <td>支持</td>
            <td>支持</td>
            <td>支持</td>
            <td>不支持</td>
        </tr>
    </table>
</body>
</html>

边框风格

  Bootstrap通过table-bordered类设计边框表格样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>默认表格风格</title>
    <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
    <table class="table table-striped table-bordered">
        <tr>
            <th></th>
            <th>Chrome</th>
            <th>Firefox</th>
            <th>Internet expiorer</th>
            <th>Opera</th>
            <th>Safari</th>
        </tr>
        <tr scope = "row">
            <th>Andriod</th>
            <td>支持</td>
            <td>支持</td>
            <td>N/A</td>
            <td>不支持</td>
            <td>N/A</td>
        </tr>
        <tr scope = "row">
            <th>IOS</th>
            <td>支持</td>
            <td>N/A</td>
            <td>N/A</td>
            <td>不支持</td>
            <td>支持</td>
        </tr>
        <tr scope="row">
            <th>Mac os x</th>
            <td>支持</td>
            <td>支持</td>
            <td>N/A</td>
            <td>支持</td>
            <td>支持</td>
        </tr>
        <tr scope="row">
            <th>windows</th>
            <td>支持</td>
            <td>支持</td>
            <td>支持</td>
            <td>支持</td>
            <td>不支持</td>
        </tr>
    </table>
</body>
</html>

鼠标悬停风格

  可以通过table-hover类为tbody标签中的每一行赋予鼠标悬停样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠标悬停风格</title>
    <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
    <table class="table table-striped table-bordered table-hover">
        <tr>
            <th></th>
            <th>Chrome</th>
            <th>Firefox</th>
            <th>Internet expiorer</th>
            <th>Opera</th>
            <th>Safari</th>
        </tr>
        <tr scope = "row">
            <th>Andriod</th>
            <td>支持</td>
            <td>支持</td>
            <td>N/A</td>
            <td>不支持</td>
            <td>N/A</td>
        </tr>
        <tr scope = "row">
            <th>IOS</th>
            <td>支持</td>
            <td>N/A</td>
            <td>N/A</td>
            <td>不支持</td>
            <td>支持</td>
        </tr>
        <tr scope="row">
            <th>Mac os x</th>
            <td>支持</td>
            <td>支持</td>
            <td>N/A</td>
            <td>支持</td>
            <td>支持</td>
        </tr>
        <tr scope="row">
            <th>windows</th>
            <td>支持</td>
            <td>支持</td>
            <td>支持</td>
            <td>支持</td>
            <td>不支持</td>
        </tr>
    </table>
</body>
</html>

紧凑单元格风格

  Bootstrap3.0通过table-condensed类设计为table标签中的每个单元格的内补（padding）减半，从而设计紧凑型表格样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>紧凑型</title>
    <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
    <table class="table table-striped table-bordered table-condensed">
        <tr>
            <th></th>
            <th>Chrome</th>
            <th>Firefox</th>
            <th>Internet expiorer</th>
            <th>Opera</th>
            <th>Safari</th>
        </tr>
        <tr scope = "row">
            <th>Andriod</th>
            <td>支持</td>
            <td>支持</td>
            <td>N/A</td>
            <td>不支持</td>
            <td>N/A</td>
        </tr>
        <tr scope = "row">
            <th>IOS</th>
            <td>支持</td>
            <td>N/A</td>
            <td>N/A</td>
            <td>不支持</td>
            <td>支持</td>
        </tr>
        <tr scope="row">
            <th>Mac os x</th>
            <td>支持</td>
            <td>支持</td>
            <td>N/A</td>
            <td>支持</td>
            <td>支持</td>
        </tr>
        <tr scope="row">
            <th>windows</th>
            <td>支持</td>
            <td>支持</td>
            <td>支持</td>
            <td>支持</td>
            <td>不支持</td>
        </tr>
    </table>
</body>
</html>

表格行风格

  Bootstrap3.0为表格增加了多个情景类样式，通过选择不同的情景类为表格添加特殊背景颜色，表格行背景类的说明如下：

  • .active：鼠标悬停在行或单元格上时所设置的颜色
  • .success：标识成功或积极的动作
  • .warning：标识警告或需要用户注意
  • .danger：标识危险或潜在的带来负面影响的工作
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>情景类表格</title>
    <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
    <table class="table table-bordered  table-hover">
        <thead>
            <tr><th>样式类</th><th>说明</th></tr>
        </thead>
        <tbody>
            <tr class="active"><td>.active</td><td>鼠标悬停</td></tr>
            <tr class="warning"><td>.warning</td><td>警告</td></tr>
            <tr class="danger"><td>.danger</td><td>危险</td></tr>
            <tr class="success"><td>.success</td><td>成功</td></tr>
        </tbody>
    </table>
</body>
</html>

如果同时为表格引用情景类样式和鼠标悬停类样式之后，Bootstrap3.0重新定义了一套情景类鼠标悬停样式，该套样式在情景类样式基础上适当加深背景颜色。

响应式表格

  Bootstrap3.0支持响应式表格，响应式表格在小屏幕设备上（小于768px）水平滚动，当屏幕大于768px宽度时水平滚动条消失。要设计响应式表格，只需要在任何.table包裹在.table-responsive中即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式表格</title>
    <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
    <div class="table-responsive">
        <table class="table table-bordered  table-hover">
            <thead>
                <tr><th>样式类</th><th>说明</th></tr>
            </thead>
            <tbody>
                <tr class="active"><td>.active</td><td>鼠标悬停</td></tr>
                <tr class="warning"><td>.warning</td><td>警告</td></tr>
                <tr class="danger"><td>.danger</td><td>危险</td></tr>
                <tr class="success"><td>.success</td><td>成功</td></tr>
            </tbody>
        </table>
    </div>
</body>
</html>

代码地址

「已注销」
关注
07 CSS通用样式---表单
qq_45240749的博客
11-01 784
CSS通用样式---表单
html表格以及常用CSS样式
qq2071114140的博客
05-29 1281
表格 一.表格标签的结构 1.使用table标签创建一个表格 <table> </table> 2.table标签的子标签 i.thead 表示表格的表头 ii.tbody 表示表格的主体 iii.tfoot 表示表格的底部 所以，表格的最基本框架 <table> <thead></thead> ...
表格的几种css样式效果
07-26
几种表格的css效果设置，可以来学习一下
05 CSS通用样式--列表
qq_45240749的博客
11-01 288
CSS通用样式--列表普通列表定义列表 普通列表   HTML列表结构可分为两种类型：有序列表和无序列表。无序列表使用项目符号来表示列表，而有序列表则使用编号来标识列表的项目顺序。具体使用标签如下： ul：标识无序列表 ol：标识有序列表 li：标识列表项目   列表样式在默认状态下，呈现缩进显示，并带有列表项目符号。Bootstrap3.0定义了list-unstyled类样式，使用它可以移...
css常见元素通用样式表
fjxylin
01-04 433
@charset "utf-8"; html, body, a, h1, h2, h3, h4, h5, h6, p, a, b, i, em, s, u, dl, dt, dd, ul, ol, li, strong, span, table,th,tr,td, img, div, form,fieldset,legend, input, button, select, option, tex...
form表单实现表格样式 -- 改css实现
weixin_45168482的博客
04-09 1639
效果图如下： 因为是以弹框形式出现，所以外层包了dialog <el-dialog title="平台资金提现" :visible.sync="dialogTableVisible"> <el-form ref="ruleForm" :rules="rules" :model="ruleForm" label-width="250px" class="form"> <el-form-item label="基本户开户名">
commonui-bs3:使用Bootstrap 3的ALA Web应用程序的通用UI
05-05
5. **CSS样式**：Bootstrap 3包含丰富的预定义CSS样式，如按钮、表格、表单、导航条等，可以快速定制外观。 6. **JavaScript组件**：例如模态框（modals）、下拉菜单（dropdowns）、轮播图（carousels）等，提供了...
优米CSS样式库(umi.css) v1.5.1-源码.zip
02-26
5. **变量和混合**：umi.css可能会使用SCSS的变量和混合功能来定义颜色、间距、字体等通用样式，以及可复用的样式块。这提高了代码的一致性，并简化了主题定制。 6. **示例和文档**：源码中可能还包括示例代码和...
CSS复习--样式的继承和样式的冲突
Loery1314的博客
12-04 903
本文介绍了样式的继承、样式的冲突以及各类选择器的权重
CSS---总结
m0_53586574的博客
01-05 747
CSS 内部样式表 、、、 <style> div { color: red; font-size: 12px; } </style> 、、、 通过此方式，方便控制当前整个页面中的元素样式设置 但是没实现样式与结构完全分离 行内样式表 、、、 ​ 青春不常在，抓紧谈恋爱 ​ 、、、 可以控制当前的标签设置样式 外部样式表 适合于样式比较多的情况. 分为俩步： 1.新建一个后缀名为.css的样式文件，把所有css代码都放入此文件中。 2.在HTML页面中
CSS美化友好的表格
09-12
美化好的表格可以使用在网站信息
8款好看的css表格.rar
08-05
国外人写的，8款非常好看的css表格，纯英文 国外人写的，8款非常好看的css表格，纯英文 国外人写的，8款非常好看的css表格，纯英文
通用css样式
08-26
通用css样式
自定义高级表格边框样式.rar
03-28
自定义高级表格边框样式.rar
表格的基本属性和常用的css样式
ccx_zb的博客
07-23 606
1.表格的创建 2.表格相关属性 注意：在tr中不能设置高度 1.宽度：width 2.高度：height 3.边框：border 4.边框颜色：bordercolor 5.背景颜色：bgcolor 6.文字水平对齐 align=“left或right或center” 7.文字垂直对齐：valign=“top或middle或bottom 8.cellspacing=”单元格与单元格之间的间距“ 在table里面 9.cellpadding=”单元格与内容之间的空隙“ 在ta..
CSS3表格和表单样式
最新发布
码说芯语的博客
10-31 5315
表格和表单样式
使用CSS优化表格
sh2001824的博客
07-14 434
使用css简单优化表格
css样式-表格优化
weixin_30909575的博客
08-08 161
1、表格的初步优化 index.html 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <link href="style6.css...
HTTP响应中Content-Type的使用与规范
- `text/css`: 用于表示CSS（层叠样式表），用于定义网页的样式。 2. 文档样式表类型： - `text/css`: 除了在上文中提到，CSS也可以独立作为文档样式表的类型。 - `application/dsssl` (提议): DSSSL（文档样式...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值