bootstrap 隐藏列
时间: 2023-07-10 17:28:49 浏览: 66
要隐藏 Bootstrap 表格中的列,可以使用 Bootstrap 提供的 `d-none` 类,该类可以使元素不可见并占据空间。将该类添加到表格列的 `<th>` 和 `<td>` 元素中即可隐藏该列。
例如,如果要隐藏第二列,可以像这样添加 `d-none` 类:
```html
<table class="table">
<thead>
<tr>
<th scope="col">Column 1</th>
<th scope="col" class="d-none">Column 2</th>
<th scope="col">Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Column 1</td>
<td class="d-none">Row 1, Column 2</td>
<td>Row 1, Column 3</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td class="d-none">Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
</tbody>
</table>
```
这样就可以将第二列隐藏起来,而其他列仍然可见。
相关问题
bootstrap 隐藏列后 getElementById无效
如果使用 Bootstrap 隐藏列的功能,那么这些列的 HTML 元素实际上是被隐藏了,而不是从 DOM 中完全删除。因此,如果你尝试使用 getElementById 获取这些列的元素,它将返回 null,因为这些元素实际上是隐藏的。
如果你需要访问被隐藏的元素,可以考虑使用其他方法来获取它们。例如,你可以使用 jQuery 来选择这些元素,并使用 .show() 方法来显示它们。或者,你可以使用 JavaScript 的 DOM 操作方法,例如 getElementsByClassName 或 querySelectorAll,来获取被隐藏的元素。
bootstrap表格隐藏列
在Bootstrap中,可以使用CSS中的“display: none”属性来隐藏表格中的列。以下是一个示例代码:
```html
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>Doe</td>
<td>john@gmail.com</td>
<td>555-555-5555</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
<td>Doe</td>
<td>jane@gmail.com</td>
<td>555-555-5555</td>
</tr>
</tbody>
</table>
```
要隐藏表格中的某一列,可以将该列的表头和每个单元格添加一个class,例如“hidden-col”,然后使用以下CSS规则:
```css
.hidden-col {
display: none;
}
```
例如,要隐藏上面表格中的“Email”列,可以将其表头和每个单元格添加class“hidden-col”,然后添加上述CSS规则:
```html
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th class="hidden-col">Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>Doe</td>
<td class="hidden-col">john@gmail.com</td>
<td>555-555-5555</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
<td>Doe</td>
<td class="hidden-col">jane@gmail.com</td>
<td>555-555-5555</td>
</tr>
</tbody>
</table>
<style>
.hidden-col {
display: none;
}
</style>
```
这将隐藏表格中的“Email”列。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)