使用laravel在垂直列中动态创建带有标题的HTML表格？

Question

我一直在四处寻找，但所有关于此的答案和文档都是针对不会动态生成所有内容的表。

这是我的刀片文件：

@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. 

我错过了什么？

Answer 1

v.1 直接生成垂直headers表。

当您意识到您的表格在 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 对您的其他问题使用相同的技术： How to show data from (multidimensional?) arrays with Laravel 5.3 blade

v.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>

键是表中的标题，值是与之关联的数据点。 IE。 Full_Name = 键，John Magsson = 值。 这是从数组中产生的，这里应该解释一下这个过程：

Blade view not printing data from array

祝你好运。 :)