《bootstrap表格宽度、bootstrap table设置列宽》

在使用Bootstrap表格时，有时需要自定义表格的宽度以及各列的宽度。最简单直接的解决方案是利用Bootstrap自带的栅格系统类（如col - *系列）或通过自定义CSS样式来设置。

一、使用Bootstrap栅格系统类

如果表格嵌套在栅格系统布局中，可以直接给表格添加相应的栅格类来设置表格整体宽度。例如：
```html

这里的“col - 6”表示表格所在的容器占据父元素宽度的一半。</p>

<p>对于设置列宽，可以为表头（<th>）和表体单元格（<td>）添加栅格类。但需要注意的是，在实际应用中这种方式可能会导致一些样式问题，并不是实践，仅作为一种思路提及。</p>

<h2>二、自定义CSS样式</h2>

<p>这是更为常用且灵活的方法。</p>

<ol>
<li>设置表格整体宽度
<code>css
.custom - table {
width:80%; /* 可根据需求设置具体宽度 */
}

对应的HTML结构：
```html

2. 设置列宽
   （1）通过给
   和
   设置固定宽度
   ```css
   .custom - table th:nth - child(1),
   .custom - table td:nth - child(1) {
   width:200px; /* 列宽度 */
   }

.custom - table th:nth - child(2),
.custom - table td:nth - child(2) {
width:300px; /* 第二列宽度 /
}
/ 依次为其他列设置宽度 */
```

（2）使用百分比设置相对宽度
```css
.custom - table th,
.custom - table td {
padding:8px;
}

.custom - table th:nth - child(1),
.custom - table td:nth - child(1) {
width:20%; /* 列占总宽度的20% */
}

.custom - table th:nth - child(2),
.custom - table td:nth - child(2) {
width:30%; /* 第二列占总宽度的30% /
}
/ 确保所有列的百分比之和不超过100% */
```

以上方法可以根据实际项目需求选择合适的方式来设置Bootstrap表格的宽度和列宽，使表格能够更好地适应页面布局并展示数据。