html - 折叠表格列表
问题描述
我有一个进程列表,其中每一行都有一个名为“Collapse”的链接,如果单击该链接应该打开一个“容器区域”,我可以在其中放入一些其他内容。
到目前为止我所做的是:
但正如您所看到的,容器的大小将与第一列“#”相同。
我怎么能避免这种情况?或者有没有更好的方法使用 div 或其他方法来做到这一点?
这是代码:
<div class="container">
<table class="table table-striped">
<tr>
<th class="th-lg"><a>#</a></th>
<th class="th-lg"><a>Status</a></th>
<th class="th-lg"><a>ID</a></th>
<th class="th-lg"><a>Process Name</a></th>
<th class="th-lg"><a>Actions</a></th>
<th></th>
</tr>
<tr>
<td>1</td>
<td><button type="button" class="btn btn-success">Active</button></td>
<td>14</td>
<td>foobarbaz</td>
<td>
<button type="button" class="btn btn-primary">Success</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Success</button>
</td>
<td>
<a data-toggle="collapse" href="#tr_a" role="button" aria-expanded="false" aria-controls="tr_a">
<span>Collapse</span>
</a>
</td>
</tr>
<tr id="tr_a" class="collapse">
<td>container</td>
</tr>
<tr>
<td>2</td>
<td><button type="button" class="btn btn-danger">Down</button></td>
<td>15</td>
<td>foobarbaz</td>
<td>
<button type="button" class="btn btn-primary">Success</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Success</button>
</td>
<td>
<a data-toggle="collapse" href="#tr_b" role="button" aria-expanded="false" aria-controls="tr_b">
<span>Collapse</span>
</a>
</td>
</tr>
<tr id="tr_b" class="collapse">
<td>container</td>
</tr>
</table>
解决方案
您可以使用该rowspan
属性使您的容器跨越多个列:
<tr id="tr_b" class="collapse">
<td colspan="6">container</td>
</tr>
td {
border: 1px solid red;
}
<div class="container">
<table class="table table-striped">
<tbody>
<tr>
<th class="th-lg"><a>#</a></th>
<th class="th-lg"><a>Status</a></th>
<th class="th-lg"><a>ID</a></th>
<th class="th-lg"><a>Process Name</a></th>
<th class="th-lg"><a>Actions</a></th>
<th></th>
</tr>
<tr>
<td>1</td>
<td><button type="button" class="btn btn-success">Active</button></td>
<td>14</td>
<td>foobarbaz</td>
<td><button type="button" class="btn btn-primary">Success</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-danger">Success</button></td>
<td>
<a data-toggle="collapse" href="#tr_a" role="button" aria-expanded="false" aria-controls="tr_a"> <span>Collapse</span> </a>
</td>
</tr>
<tr id="tr_a" class="collapse">
<td colspan="6">container</td>
</tr>
</tbody>
</table>
</div>
(红色边框仅用于可视化)
推荐阅读
- java - 在列表中查找特定记录并在该记录上方显示 5 条记录,在该记录下方显示 5 条记录
- javascript - 表单数据将作为空到 HttpContext.Current.Request
- python - 无法删除 matplotlib 中的先前绘图
- php - $_SESSION 登录 x 注销按钮脚本不运行,再运行一个,因为它被标记为重复
- html - HTML 和 body 没有 100% 的宽度
- java - 如何使用 Java 以给定格式输出数据库结果
- c# - C# WinForms RichTextBox 鼠标中键滚动:防止箭头光标
- java - 使用方法来初始化按钮
- google-calendar-api - Google 日历 API 出现错误不足权限
- javascript - 从另一个文件导入的 JSON 包含未定义