表格中的相邻边会被合并,单元格内横向和纵向的间距设为了0,“td,th”中已做自动换行。
默认是给“table”元素赋“.table”类,“th,td,caption”可以控制向左、向右或居中对齐。
栏目一 | 栏目二 | 栏目三 |
---|---|---|
左对齐 | 居中对齐 | 右对齐 |
内容一 | 内容二 | 内容三 |
<table class="table">
<caption class="tc">无边框</caption>
<thead>
<tr>
<th>栏目一</th>
<th>栏目二</th>
<th>栏目三</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tl">左对齐</td>
<td class="tc">居中对齐</td>
<td class="tr">右对齐</td>
</tr>
</tbody>
</table>
只要给“table”多加一个样式“table-bordered”即可。
栏目一 | 栏目二 | 栏目三 |
---|---|---|
内容一 | 内容二 | 内容三 |
内容一 | 内容二 | 内容三 |
<table class="table table-bordered">
//...
</table>
默认有四种颜色,红、黄、蓝、绿。
栏目一 | 栏目二 | 栏目三 |
---|---|---|
success | success | success |
info | info | info |
important | important | important |
warning | warning | warning |
default | default | default |
<table class="table table-bordered">
<tbody>
<tr class="success">
<td>success</td>
<td>success</td>
<td>success</td>
</tr>
<tr class="info">
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr class="important">
<td>important</td>
<td>important</td>
<td>important</td>
</tr>
<tr class="warning">
<td>warning</td>
<td>warning</td>
<td>warning</td>
</tr>
<tr>
<td>default</td>
<td>default</td>
<td>default</td>
</tr>
</tbody>
</table>