Question

我有一个过程列表，其中每一行都有一个名为“折叠”的链接，如果单击该链接，应打开一个“容器区域”，在其中可以放入其他内容。

到目前为止，我所做的是：

但是正如您所看到的，容器的大小将与第一列“＃”相同。

如何避免这种情况？还是有更好的方法使用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>

Answer 1

您可以使用rowspan属性使容器跨越多列：

end_date_transformed

<tr id="tr_b" class="collapse">
    <td colspan="6">container</td>
</tr>

td {
  border: 1px solid red;
}

（红色边框仅用于可视化）

Answer 2

您可以尝试添加值为6的colspan属性，该属性表示您要将6列合并为1

<td colspan="6">container</td>

谢谢..

收合表格清单

2 个答案: