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

mac2025-02-06 12

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>

代码地址

最新回复(0)