bootstrap表格样式

2024-08-30 03:41:26

一：表格基本格式

<table>

<tr>

<th>标题一</th>

<th>标题二</th>

</tr>

<tr>

<td>单元格内容一</td>

<td>单元格内容二</td>

</tr>

</table>

1、首先所有的表格内容，肯定都包含在<table>标签内

2、<tr>表示一行

3、<th>表示表格标题

4、<td>表示表格单元格内容

二、表格的bootstrap样式

定义类名为.table的表格

<table class="table">……</table>

1、斑马线表格： .table-striped

2、带边框表格： .table-bordered

3、鼠标悬停时，高亮显示： .table-hover

4、紧凑型表格：.table-condensed

5、响应式表格：.table-responsives

三、<thead>用法

<table>

<thead>

<tr>

<th>标题一</th>

<th>标题二</th>

</tr>

</thead>

<tbody>

<tr>

<td>单元格内容一</td>

<td>单元格内容二</td>

</tr>

</tbody>

</table>

1、在表格的标题添加<thead></thead>，标题底部会显示2px的浅灰色实线

2、<tbody></tbody>表示表格的主体，配合<thead></thead>使用

最新文章

热门文章