将数据显示到HTML表中

时间:2017-11-16 08:31:03

标签: html css

我能够从db显示我的数据。我想在标签下的表格中显示但是我的数据显得很弯曲。行不直。为什么会发生这种情况?

它是这种方式安排的。

下面的更新代码没有为表格提供正确的格式 表格

  id  name
     1    James
    4   Michel
   2  Jonathan  

HTML

<div class="row">
    <div class="col-md-7">

        <div class="nav-tabs-custom">
            <ul class="nav nav-tabs">
                @foreach($items as $item)
                    <li><a href="#tab_{{ $item->id }}" data-toggle="tab" >{!!$item->name!!}</a></li>
                @endforeach             
            </ul>
            <div class="tab-content">
                @foreach($items as $item)
                    <div class="tab-pane active" id="tab_{{ $item->id }}">
                        @foreach($item->products as $product)
                            <table class="table">
                                <thead>
                                    <tr> 
                                        <th>No#</th>
                                        <th>Name</th>
                                        <th>Action</th>
                                    </tr>
                               </thead>
                               <tbody>
                                    <tr>
                                        <td>{{$product->id }}</td>
                                        <td>{{ $product->name}}</td>
                                    </tr>
                                </tbody>
                            </table>
                        @endforeach         
                    </div>    
                @endforeach         
            </div>
        </div>
    </div>

更新代码

更新

<div class="row">
    <div class="col-md-7">

        <div class="nav-tabs-custom">
            <ul class="nav nav-tabs">
                @foreach($items as $item)
                    <li><a href="#tab_{{ $item->id }}" data-toggle="tab" >{!!$item->name!!}</a></li>
                @endforeach             
            </ul>
            <div class="tab-content">
                @foreach($items as $item)
                    <div class="tab-pane active" id="tab_{{ $item->id }}">
                            <table class="table">
                                <thead>
                                    <tr> 
                                        <th>No#</th>
                                        <th>Name</th>
                                        <th>Action</th>
                                    </tr>
                               </thead>
                               <tbody>
                        @foreach($item->products as $product)

                                    <tr>
                                        <td>{{$product->id }}</td>
                                        <td>{{ $product->name}}</td>
                                    </tr>
                        @endforeach         

                                </tbody>
                            </table>
                    </div>    
                @endforeach         
            </div>
        </div>
    </div>

2 个答案:

答案 0 :(得分:1)

foreach products的开头位于<table>开始代码之前。

但是,您尝试为每个产品生成一行,因此它应该在<tr>开始标记之前。

同样应将匹配的endforeach移至</tr>结束标记之后。

答案 1 :(得分:0)

您需要在@foreach()内移动@endforeach +对应的<tbody> ,否则您将为每个产品输出一个新表格。这应该是这样的:

<table class="table">
    <thead>
        <tr> 
            <th>No#</th>
            <th>Name</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
    @foreach($item->products as $product)
        <tr>
            <td>{{ $product->id   }}</td>
            <td>{{ $product->name }}</td>
        </tr>
    @endforeach      
    </tbody>
</table>