使用 laravel 在垂直列中动态创建 HTML table 和 headers？

Question

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

这是我的 blade 文件：

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

在您了解 table 在 HTML 中的实际外观后，这很容易解决，以便获得垂直 headers。

<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 循环即可填充数据。

对于每一列，您都必须 return 配置文件中的匹配数据。而不是 returning $person->name 使用 $person[$col]

要嵌套 foreach，请对您的其他问题使用相同的技术： How to show data from (multidimensional?) arrays with Laravel 5.3 blade

v.2 使用正常的 tables 结合 CSS 技巧回流 table 导入 twitter bootstrap 并在格式良好的 table.

上使用 .table-reflow

生成的 table 将如下所示，可以使用您的初始 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>

内容顺序复杂 tables: 请注意 table-reflow 样式会更改内容的视觉顺序。确保仅将此样式应用于 well-formed 和简单数据 table（特别是不要将其用于布局 table s) 每行和每列使用适当的 <th> table header 个单元格。

此外，对于 table 具有跨多行或多列（使用 rowspan 或 colspan 属性）的单元格，此 class 将无法正常工作。

你应该在这里查看文档：

twitter-bootstrap .table-reflow

编辑：

除了 Kronmark 的优点外，我把它留给新人。这就是自动化 table 的样子：

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

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

Blade view not printing data from array

祝你好运。 :)

使用 laravel 在垂直列中动态创建 HTML table 和 headers？

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

html

php

html-table

laravel-5

laravel-blade