使用laravel动态地在垂直列中创建带有标题的HTML表 - Create HTML table with headers in a vertical column dynamically with laravel?

Create HTML table with headers in a vertical column dynamically with laravel?

我一直在寻找，但是所有关于这个问题的答案和文档都是针对不动态生成一切的表的。

这是我的刀片文件:

@extends('layout')
@section('content')
    <h1>User Profile Data</h1>
        <table class="table table-striped">
        <tr>
            @foreach ($columns as $column => $name)
               <th><strong> {{ $name }} </strong></th>
            @endforeach
            @foreach ($profile as $person)
                @foreach ($person as $name)
                   <td> {{ $name }} </td>
                @endforeach
            @endforeach
        </tr>
        </table>
@stop

一切正常，除了一个问题，头像是水平的，而不是垂直的。我想能够自动从数据库填充数据，并有它并排显示。

一样:

Name: John
Age: 25
Height: 176
etc.

我错过了什么?

v.1直接生成垂直标头表

这可以很容易地解决，当你意识到你的表实际上看起来像HTML，为了有垂直的标题。

<h1>User Profile Data</h1>
<table class="table table-striped">
    <tr>
        <th><strong> Name: </strong></th>
        <td> John </td>
        <td> Joane </td>
    </tr>
    <tr>
        <th><strong> Surname: </strong></th>
        <td> Doe </td>
        <td> Donald </td>
    </tr>
    <tr>
        <th><strong> Email: </strong></th>
        <td> john.doe@email.com </td>
        <td> jane@email.com </td>
    </tr>
</table>

知道了上面的目标之后，只需嵌套foreach循环，就可以填充数据了。

对于每一列，您都必须从配置文件返回匹配的数据。不返回$person->name，使用$person[$col]

要嵌套foreach，请使用与您的其他问题相同的技术:如何显示数据从(多维?)数组与Laravel 5.3刀片

2使用普通表结合CSS技巧来回流表导入twitter bootstrap并在格式良好的表上使用.table-reflow。

生成的表看起来像这样，可以用您的初始laravel代码生成:

<table class="table table-striped table-hover table-reflow">
    <thead>
        <tr>
            <th ><strong> Name: </strong></th>
            <th ><strong> Surname: </strong></th>
            <th ><strong> Email: </strong></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td> John </td>
            <td> Doe </td>
            <td> john.doe@email.com </td>
        </tr>
        <tr>
            <td> Joane </td>
            <td> Donald </td>
            <td> jane@email.com </td>
        </tr>
    </tbody>
</table>

内容顺序和复杂表:注意，表格回流样式会改变内容的视觉顺序。确保您只将此样式应用于格式良好的和简单的数据表(特别是，不要将此用于布局表)，并为每行和列使用适当的<th>表标题单元格。

此外，对于单元格跨越多行或多列(使用rowspan或colspan属性)的表，该类将不能正确工作。

你应该查看这里的文档:

twitter-bootstrap .table-reflow

编辑:

除了Kronmark的优秀观点，我把这个留给新人。下面是自动表的样子:

   <table class="table table-striped table-hover table-reflow">
        @foreach($array as $key=>$value)
                <tr>
                    <th ><strong> {{ $key }}: </strong></th>
                    <td>  {{ $value }} </td>
                </tr>
        @endforeach
    </table>

键是表中的标题，值是与之关联的数据点。即Full_Name = Key, John Magsson = value。这是从一个数组生成的，这个过程应该在这里解释:

刀片视图不从数组中打印数据

好运。:)