Reputation: 89
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
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
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>
Upvotes: 1