Jackstick
Jackstick

Reputation: 89

Colspan attribute doesn't work with collapse

I'm trying to make a simple table with hidden rows that span the length of the table, but when I make the row appear the row is bound to one column despite it having 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>

Link to sample code: http://www.bootply.com/9Re67hbLEf#

Upvotes: 1

Views: 1379

Answers (2)

Abhijit Poojari
Abhijit Poojari

Reputation: 143

   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>

Upvotes: 1

Mistalis
Mistalis

Reputation: 18299

I guess you can just move the class="collapse info" to your tr instead of your td.


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

becomes

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

Updated Bootply

Upvotes: 1

Related Questions