Question

我想显示一些表格（我既不知道表格的数量，也不知道它们的长度）。这些表仅由5列组成。因此，我想在屏幕上将所有表显示为三列（参见屏幕截图）。我不知道如何确保标题与相关表格位于同一列，我的意思是标题可以位于一列的底部，而表格可以位于下一列的顶部

链接到屏幕截图：

http://zupimages.net/viewer.php?id=19/15/1sm8.png“

HTML：
进行中

    {% for temp in list_of %}
        <div class="group">
        <div class="title-table round">
            {{temp.pn}}
        </div>

        <table class="table round group">

            <thead>
                <tr class="">
                    <th class="round"></th>
                    <th class="round grey">OF</th>
                    <th class="round grey">Start Date</th>
                    <th class="round grey">End date</th>
                    <th class="round grey">Status</th>
                </tr>
            </thead>

            <tbody>
            {% for temp_of in temp.list_of_pn %}

            <tr class="highlight-black">
                {% if temp_of.complete == 0 %}
                <td class="round"><i class="fas fa-times-circle uncomplete round"></i></td>
                {% endif %}
                {% if temp_of.complete == 1 %}
                <td class="round"><i class="fas fa-check-circle complete round"></i></td>
                {% endif %}
                {% if temp_of.complete == None %}
                <td class="round"></td>
                {% endif %}

                <td class="round cell">
                    <a href = "{% url 'app_rafale:of_overview' pk=temp_of.pk %}" {{temp_of.num_of}}>
                        {{temp_of.num_of}}
                    </a>
                </td>
                <td class="round cell">
                    {{temp_of.start_date |date:'d/m/Y'}}
                </td>
                <td class="round cell">
                    {{temp_of.end_date |date:'d/m/Y'}}
                </td>
                <td class="round cell">
                    {{temp_of.prod_status}}
                </td>

            </tr>

    </div>
            {% endfor %}
            </tbody>
        </table>
    {% endfor %}
                </div>

这是CSS：

 .subtitle{
 padding: 5px;
 background-color: rgba(0, 0, 0, .6);
 text-align: center;
 color : #fff;
 margin-right: auto;
 margin-left: auto;
 margin-top : 1%;
 width: auto;
 font-size: 150%;
 border-radius: 10px;
 }

 .global{
 background-color: rgba(187, 210, 225, .8);
 margin : 0.5%;
 padding: 10px;
 }

 .title-table{
 padding : 3px;
 text-align: center;
 background-color: rgba(0, 0, 0, 0.5);
 color: #fff;
 }

 .table{
         padding: 5px;
     width: 100%;
     overflow: hidden;
     box-shadow: 0 0 20px rgba(0,0,0,0.1);
     text-align: center;
     background-color: rgba(0,0,0,0.2);
     color: #fff;
 }


 .row-of{
    background-color: rgba(0,0,0,0.2);

 }

 .group{
     column-span : 1;
 }

 .highlight-black:hover .cell{
 background-color: #111;
 }

 .col-2{
 position: relative;
 margin : 0.5%;
 float: left;
 width: 49%;
 padding: 10px;
 background-color: rgba(187, 210, 225, .8);
 }

我希望标题“ VP0680”和“ SP0731”位于其相关表的顶部，位于下一列。

如何在同一列中显示元素？

0 个答案: