Bootstrap collapse внутри таблицы с Laravel

Question

То, что я пытаюсь сделать, - это показать детали заказа определенного порядка после того, как пользователь нажмет кнопку с обвалом бутстрапа.

Внизу фотографии покажут, что я ожидаю в качестве решения.

Перед нажатием на кнопку:

После нажатия на кнопку желаемое решение, которое я хочу:

Но вместо этого результата у меня есть (то есть моя проблема каждый td только в одной строке):

Html:

<div class="container"> 
<h1>My Orders</h1> 
<h3>Total orders: {{$orders->total()}}</h3> 
<table class="table table-striped"> 
    <thead> 
    <tr> 
     <th class="col-sm-4">Order Id</th>   
     <th class="col-sm-4">Total Paid</th> 
     <th class="col-sm-2">Order Date/Time</th> 
    </tr>  
    </thead> 
    <tbody> 
    @foreach($orders as $keyo => $item) 
     <tr style="width: 100%;"> 
      <td>{{$item->id}} <button class="btn btn-success fa fa-eye" type="button" data-toggle="collapse" data-target="#viewmyorder{{$keyo}}" aria-expanded="false" aria-controls="collapseExample"></td>    
      <td>{{ number_format($item->total_paid,2,',','') }} &euro;</td> 
      <td>{{$item->created_at}}</td>    
     </tr>  
     <tr id="viewmyorder{{$keyo}}" class="collapse" style="width: 100%;"> 
      <?php $orderitemtable = \App\OrderItem::all()->where('order_id', $item->id); ?> 
      @foreach($orderitemtable as $theitems) 
       <?php $findproducts = \DB::table('products')->select('id', 'name', 'code', 'price')->where('id', $theitems->product_id)->get(); ?> 
      @foreach($findproducts as $pr)       
       <td class="col-md-1">{{$pr->name}}</td> 
       <?php $findphoto = \App\Photo::where('product_id', $pr->id)->get()->first(); ?>    
       <td class="col-md-4"><img src="/{{$findphoto->show_path}}"></td>        
       <td class="col-md-1">{{$pr->code}}</td> 
       <td class="col-md-1">{{$pr->price}}</td>    
       @if($theitems->order_condition == 0) 
      <td class="col-md-2">Condition Order: Is in proccess</td> 
      @elseif($theitems->order_condition == 1) 
      <td class="col-md-2">Condition Order: We haven't enough items</td> 
      @elseif($theitems->order_condition == 2) 
      <td class="col-md-2">Condition Order: Order Completed</td> 
      @endif 
      @if(($theitems->order_comments != null)== true)  
      <td class="col-md-3">{{$theitems->order_comments}}</td> 
      @else 
      <td class="col-md-3">No comments in this item</td> 
      @endif   

      @endforeach  

      @endforeach 

     </tr> 
    @endforeach 

    </tbody> 
</table> 
</div> 

Answer 1

Вы можете использовать аккордеон для Распад строк таблицы. Вот лучший пример. http://www.bootply.com/fdTMNTiLis