Question 121948 in Redis Question posted in
The official documentation can be found here.

Redis – How to create a columns in two subcolumns

I’m creating a table in html and I want to obtain this result:
enter image description here

I created columns with their headers (S, Incoming, Session..) and rows with values (I retrive data from a Python script), but I can’t to divide columns in "queue" and "block".

This is my html for headers: https://jsfiddle.net/Maestro1508/np239Lc0/4/

Full 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 %}
Tags:

2

Answers


  1. 0

    Just add another row below your first header row. Your first row has 17 columns, 1 single + 8 double columns. In your second new rows, just make sure you add 17 single columns (ie without the colspan =2 attribute).

    <tr>
    <th>1. xxx</th>
     ...
    <th>17. XXX</th>
</th>
    Login or Signup to reply.
  2. 0

    You could just add an other row in the thead with all of the th you need:

    <thead>
  <tr>
    <th>Server</th>
    <th colspan="2" style="padding-left: 0.5em">Incoming</th>
    <th colspan="2" style="padding-left: 0.5em">Session</th>
    <th colspan="2" style="padding-left: 0.5em">KPI</th>
    <th colspan="2" style="padding-left: 0.5em">Export</th>
    <th colspan="2" style="padding-left: 0.5em">Thresholds</th>
    <th colspan="2" style="padding-left: 0.5em">AS Profile</th>
    <th colspan="2" style="padding-left: 0.5em">MP Profile</th>
    <th colspan="2" style="padding-left: 0.5em">First Beat</th>
  </tr>
  <tr>
    <th></th>
    <th>queue</th>
    <th>block</th>
    <th>queue</th>
    <th>block</th>
    <th>queue</th>
    <th>block</th>
    <th>queue</th>
    <th>block</th>
    <th>queue</th>
    <th>block</th>
    <th>queue</th>
    <th>block</th>
    <th>queue</th>
    <th>block</th>
    <th>queue</th>
    <th>block</th>
  </tr>
</thead>

    I guess you could make these columns dynamically with the used templating language, if you don’t want to hardcode them.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search