表格效果

表头 表头 表头
类别 表格内容 表格内容
类别 表格内容 表格内容
类别 表格内容 表格内容
HTML 代码 <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>

带水平线

表头 表头 表头
类别 表格内容 表格内容
类别 表格内容 表格内容
类别 表格内容 表格内容
HTML 代码 <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带背景

表头 表头 表头
类别 表格内容 表格内容
类别 表格内容 表格内容
类别 表格内容 表格内容
HTML 代码 <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>

带外边框

表头 表头 表头
类别 表格内容 表格内容
类别 表格内容 表格内容
类别 表格内容 表格内容
HTML 代码 <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>

圆角

表头 表头 表头
类别 表格内容 表格内容
类别 表格内容 表格内容
类别 表格内容 表格内容
HTML 代码 <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>

奇数行背景设为浅灰色

表头 表头 表头
类别 表格内容 表格内容
类别 表格内容 表格内容
类别 表格内容 表格内容
HTML 代码 <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>

鼠标悬停样式

表头 表头 表头
类别 表格内容 表格内容
类别 表格内容 表格内容
类别 表格内容 表格内容
HTML 代码 <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>