bootstrap table 表头和行 圆角
时间: 2024-08-30 10:02:05 浏览: 63
Bootstrap Table 是一个基于 Twitter Bootstrap 的表格插件,它允许你在网页上轻松创建响应式的表格。如果你想要为表头(th)和行(td)添加圆角样式,你可以通过 CSS 自定义样式或者利用 Bootswatch 这样的主题包。
首先,如果你直接在 CSS 中设置,可以这样做:
```css
thead tr th, tbody tr td {
border-radius: <你需要的圆角大小>px; /* 可以是 4px、6px 或者其他值 */
}
```
这里的 `<你需要的圆角大小>` 可以替换为你喜欢的数值,比如 `4px` 或 `5px` 等。
其次,如果使用 Bootswatch 主题,有些预设的主题如 "Superhero" 或 "Cyborg" 就包含圆角的样式,你可以在引入 Bootswatch 样式时选择这些主题。
在 HTML 中引用样式和表格的基本结构大致如下:
```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootswatch@<version>/cyborg/bootstrap.min.css">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th style="border-radius: your-border-radius;">表头 1</th>
<!-- 其他表头 -->
</tr>
</thead>
<tbody>
<!-- 表行 -->
<tr>
<td style="border-radius: your-border-radius;">单元格内容</td>
<!-- 其他单元格 -->
</tr>
</tbody>
</table>
```
记得将 `<version>` 替换为实际使用的 Bootswatch 版本,并根据需要调整 `your-border-radius` 的值。