时间戳

首页 > 解决方案 > 如何在两个子列中创建列

html - 如何在两个子列中创建列

问题描述

我在 html 中创建一个表，我想获得这个结果： 在此处输入图像描述

我创建了带有标题（S、Incoming、Session..）的列和带有值的行（我从 Python 脚本中检索数据），但我不能在“队列”和“块”中划分列。

这是我的标题 html：https ://jsfiddle.net/Maestro1508/np239Lc0/4/

完整的html：

<li><span>Redis Status</span></li>
{% endblock %}

{% block content %}
<div id="main-content" class="col-12">
    <h3>Redis Status</h3>
    <div class="row">
        <div class="col-12 like-a-table border-last-row">
          <table class="table">
        <thead>
          <tr>
            <th>Server</th>
            <th colspan="2" style="padding-left: .5em;">Incoming</th>
            <th colspan="2" style="padding-left: .5em;">Session</th>
            <th colspan="2" style="padding-left: .5em;">KPI</th>
            <th colspan="2" style="padding-left: .5em;">Export</th>
            <th colspan="2" style="padding-left: .5em;">Thresholds</th>
            <th colspan="2" style="padding-left: .5em;">AS Profile</th>
            <th colspan="2" style="padding-left: .5em;">MP Profile</th>
            <th colspan="2" style="padding-left: .5em;">First Beat</th>
          </tr>


        </thead>
        <tbody>
            {% for server, keys in redis_info.items %}
            <tr id="{{ server }}">
                <td> {{ server }} </td>
                {% for item in keys %}
                    <td style="padding-left: .5em;">{{ item.0 }}</td>
                    <td style="padding-left: .5em;">{{ item.1 }}</td>
                {% endfor %}
            </tr>
            {% endfor %}
        </tbody>
              </table>
        </div>
    </div>
</div>
{% endblock %}

标签： html

解决方案

只需在您的第一个标题行下方添加另一行。您的第一行有 17 列，1 个单列 + 8 个双列。在第二个新行中，只需确保添加 17 个单列（即没有 colspan =2 属性）。

<tr>
    <th>1. xxx</th>
     ...
    <th>17. XXX</th>
</th>

推荐阅读