Question

我正在尝试创建一个包含跨越表长度的隐藏行的简单表，但是当我显示行时，尽管行colspan="5"，行仍绑定到一列。

<table class="table table-hover">
<tbody><tr>
<th>Status</th>
<th>File</th>
<th>Time</th>
<th>Errors</th>
<th>Log</th>
</tr>

<tr><td>status</td><td>fileName</td><td>10</td><td>2</td><td>2</td></tr>
<tr class="collapse info"><td colspan="5">This is a long long long long long long long long long long long long long long long long long long message</td></tr>
<tr><td>status</td><td>fileName</td><td>10</td><td>2</td><td>

  <button type="button" class="btn btn-info" data-toggle="collapse" data-target=".info">Show Log</button></td></tr>

</tbody></table>

示例代码链接：http://www.bootply.com/9Re67hbLEf#

Answer 1

我想您可以将class="collapse info"移至tr而不是td。

<tr><td class="collapse info" colspan="5">...</td></tr>

成为

<tr class="collapse info"><td colspan="5">...</td></tr>

Updated Bootply

Answer 2

   add a div tag inside td and give class name "collapse info".It will work

 <table class="table table-hover">
        <tbody><tr>
        <th>Status</th>
        <th>File</th>
        <th>Time</th>
        <th>Errors</th>
        <th>Log</th>
        </tr>

        <tr><td>status</td><td>fileName</td><td>10</td><td>2</td><td>2</td></tr>
        <tr><td colspan="5"><div class="collapse info">This is a long long long long long long long long long long long long long long long long long long message</div></td></tr>
        <tr><td>status</td><td>fileName</td><td>10</td><td>2</td><td>

          <button type="button" class="btn btn-info" data-toggle="collapse" data-target=".info">Show Log</button></td></tr>

        </tbody></table>

Colspan属性不适用于折叠

2 个答案: