摘要:
html表格的基本结构html<table> <tr> &nbs...
html表格的基本结构
html<table> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr></table>
bootstrap中通过相应的样式对表格进行美化:
.table
类可以为其赋予基本的样式 — 少量的内补(padding)和水平方向的分隔线。
html<table class="table"></table>
.table-striped
类可以给 <tbody>
之内的每一行增加斑马条纹样式。
html<table class="table table-striped"></table>
.table-bordered
类为表格和其中的每个单元格增加边框。
html<table class="table table-bordered"></table>
.table-hover
类可以让 <tbody>
中的每一行对鼠标悬停状态作出响应。
html<table class="table table-hover"></table>
.table-condensed
类可以让表格更加紧凑,单元格中的内补(padding)均会减半。
html<table class="table table-condensed"></table>
bootstrap对table标签中的 tr td
的样式设置:
.success
类鼠标悬停在行或单元格上时所设置的颜色。
.success
标识成功或积极的动作
.info
标识普通的提示信息或动作
.warning
标识警告或需要用户注意
.danger
标识危险或潜在的带来负面影响的动作
html<!--设置一行的状态颜色--><tr class="active"></tr><tr class="success"></tr><tr class="warning"></tr><tr class="danger"></tr><tr class="info"></tr><!--设置一行中的某列的状态颜色--><tr> <td class="active"></td> <td class="success"></td> <td class="warning"></td> <td class="danger"></td> <td class="info"></td></tr>
响应式表格的设置,在table表格外包裹一层div,并设置.table-responsive
类:
html<div class="table-responsive"> <table class="table"> </table></div>