表格效果
表头 |
表头 |
表头 |
类别 |
表格内容 |
表格内容 |
类别 |
表格内容 |
表格内容 |
类别 |
表格内容 |
表格内容 |
<table class="table">
<thead>
<tr>
<th>表头</th>
<th>表头</th>
<th>表头</th>
</tr>
</thead>
<tbody>
<tr>
<th>类别</th>
<td>表格内容</td>
<td>表格内容</td>
</tr>
<tr>
<th>类别</th>
<td>表格内容</td>
<td>表格内容</td>
</tr>
<tr>
<th>类别</th>
<td>表格内容</td>
<td>表格内容</td>
</tr>
</tbody>
</table>
带水平线
表头 |
表头 |
表头 |
类别 |
表格内容 |
表格内容 |
类别 |
表格内容 |
表格内容 |
类别 |
表格内容 |
表格内容 |
<table class="table table-border">
<thead>
<tr>
<th>表头</th>
<th>表头</th>
<th>表头</th>
</tr>
</thead>
<tbody>
<tr>
<th>类别</th>
<td>表格内容</td>
<td>表格内容</td>
</tr>
<tr>
<th>类别</th>
<td>表格内容</td>
<td>表格内容</td>
</tr>
<tr>
<th>类别</th>
<td>表格内容</td>
<td>表格内容</td>
</tr>
</tbody>
</table>
th带背景
表头 |
表头 |
表头 |
类别 |
表格内容 |
表格内容 |
类别 |
表格内容 |
表格内容 |
类别 |
表格内容 |
表格内容 |
<table class="table table-border table-bg">
<thead>
<tr>
<th>表头</th>
<th>表头</th>
<th>表头</th>
</tr>
</thead>
<tbody>
<tr>
<th>类别</th>
<td>表格内容</td>
<td>表格内容</td>
</tr>
<tr>
<th>类别</th>
<td>表格内容</td>
<td>表格内容</td>
</tr>
<tr>
<th>类别</th>
<td>表格内容</td>
<td>表格内容</td>
</tr>
</tbody>
</table>
带外边框
表头 |
表头 |
表头 |
类别 |
表格内容 |
表格内容 |
类别 |
表格内容 |
表格内容 |
类别 |
表格内容 |
表格内容 |
<table class="table table-border table-bordered">
<thead>
<tr>
<th>表头</th>
<th>表头</th>
<th>表头</th>
</tr>
</thead>
<tbody>
<tr>
<th>类别</th>
<td>表格内容</td>
<td>表格内容</td>
</tr>
<tr>
<th>类别</th>
<td>表格内容</td>
<td>表格内容</td>
</tr>
<tr>
<th>类别</th>
<td>表格内容</td>
<td>表格内容</td>
</tr>
</tbody>
</table>
圆角
表头 |
表头 |
表头 |
类别 |
表格内容 |
表格内容 |
类别 |
表格内容 |
表格内容 |
类别 |
表格内容 |
表格内容 |
<table class="table table-border table-bordered radius-10">
<thead>
<tr>
<th>表头</th>
<th>表头</th>
<th>表头</th>
</tr>
</thead>
<tbody>
<tr>
<th>类别</th>
<td>表格内容</td>
<td>表格内容</td>
</tr>
<tr>
<th>类别</th>
<td>表格内容</td>
<td>表格内容</td>
</tr>
<tr>
<th>类别</th>
<td>表格内容</td>
<td>表格内容</td>
</tr>
</tbody>
</table>
奇数行背景设为浅灰色
表头 |
表头 |
表头 |
类别 |
表格内容 |
表格内容 |
类别 |
表格内容 |
表格内容 |
类别 |
表格内容 |
表格内容 |
<table class="table table-border table-bordered table-striped">
<thead>
<tr>
<th>表头</th>
<th>表头</th>
<th>表头</th>
</tr>
</thead>
<tbody>
<tr>
<th>类别</th>
<td>表格内容</td>
<td>表格内容</td>
</tr>
<tr>
<th>类别</th>
<td>表格内容</td>
<td>表格内容</td>
</tr>
<tr>
<th>类别</th>
<td>表格内容</td>
<td>表格内容</td>
</tr>
</tbody>
</table>
鼠标悬停样式
表头 |
表头 |
表头 |
类别 |
表格内容 |
表格内容 |
类别 |
表格内容 |
表格内容 |
类别 |
表格内容 |
表格内容 |
<table class="table table-border table-bordered table-hover">
<thead>
<tr>
<th>表头</th>
<th>表头</th>
<th>表头</th>
</tr>
</thead>
<tbody>
<tr>
<th>类别</th>
<td>表格内容</td>
<td>表格内容</td>
</tr>
<tr>
<th>类别</th>
<td>表格内容</td>
<td>表格内容</td>
</tr>
<tr>
<th>类别</th>
<td>表格内容</td>
<td>表格内容</td>
</tr>
</tbody>
</table>