Laravelでテーブル内のブートストラップの崩壊

Question

私がしようとしているのは、ユーザーがブートストラップの崩壊でボタンを押した後に特定の注文の詳細チェックアウトを表示することです。

以下の写真は、私が解決策として期待していることを示します。

はこのボタンをクリックする前に、次のボタンを望ましい解決策をクリックした後

を私がしたい：

しかし、その代わりに、私は持っている。この結果は、（それは私の問題のすべてをありますtd要素は1行のみ）：

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