Блог

Главная - Вопросы по программированию - Разделите широкую таблицу с одним значением для каждого столбца

Разделите широкую таблицу с одним значением для каждого столбца

#html #css #html-table #jinja2

Вопрос:

У меня есть html-таблица, сгенерированная с помощью Jinja, с большим количеством столбцов и одним значением для каждого из них. Есть ли какой-нибудь способ разделить таблицу на части с 3-4 столбцами и их значениями, которые будут располагаться один внизу другого и все будут оставаться на экране. Или любым другим способом это может выглядеть на экране так, как я хочу, чтобы это выглядело

 HTML:
 
 <div class="table-wrapper">
   <table class="fl-table">
      <thead>
         <tr>
            <th>LON</th>
            <th>PRODUCT IDENTIFICATION INFORMATION</th>
            <th>PRODUCT IDENTIFICATION MANUFACTURER,NAME,REVISION,INFORMATION</th>
            <th>REQUEST TA SERIAL NUMBER IDENTIFICATION</th>
            <th>STRANGE TYPES</th>
            <th>TA SERIAL NUMBER IDENTIFICATION</th>
            <th>TA REVISION IDENTIFICATION OF SOFTWARE RELEASE</th>
            <th>LOCAL IP ADDRESS</th>
            <th>LAT</th>
            <th>GLOBAL OBJECT IDENTIFICATION</th>
            <th>TA MODEL IDENTIFICATION</th>
            <th>COMPLETE TA CAPABILITIES LIST</th>
            <th>MANUFACTURER IDENTIFICATION</th>
            <th>VERSION OF FIRMWARE</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td><span id=lon>18.840295<button id="open-button" onclick="openForm(this)">✎</button></span></td>
            <td><span id=product_identification_information>SIM800 R14.18<button id="open-button" onclick="openForm(this)">✎</button></span></td>
            <td><span id=product_identification:manufacturer,name,revision,information>Revision:1418B06SIM800C24<button id="open-button" onclick="openForm(this)">✎</button></span></td>
            <td><span id=request_TA_serial_number_identification>297011200347942<button id="open-button" onclick="openForm(this)">✎</button></span></td>
            <td><span id=strange_types>nothing here<button id="open-button" onclick="openForm(this)">✎</button></span></td>
            <td><span id=TA_serial_number_identification>862095054008385<button id="open-button" onclick="openForm(this)">✎</button></span></td>
            <td><span id=TA_revision_identification_of_software_release>Revision:1418B06SIM800C24<button id="open-button" onclick="openForm(this)">✎</button></span></td>
            <td><span id=local_IP_address>10.66.100.38<button id="open-button" onclick="openForm(this)">✎</button></span></td>
            <td><span id=lat>42.291148<button id="open-button" onclick="openForm(this)">✎</button></span></td>
            <td><span id=global_object_identification>SIM800<button id="open-button" onclick="openForm(this)">✎</button></span></td>
            <td><span id=TA_model_identification>SIMCOM_SIM800C<button id="open-button" onclick="openForm(this)">✎</button></span></td>
            <td><span id=complete_TA_capabilities_list><button id="open-button" onclick="openForm(this)">✎</button></span></td>
            <td><span id=manufacturer_identification>SIMCOM_Ltd<button id="open-button" onclick="openForm(this)">✎</button></span></td>
            <td><span id=version_of_firmware>3<button id="open-button" onclick="openForm(this)">✎</button></span></td>
         </tr>
      </tbody>
   </table>
</div>
</form>

CSS

 {box-sizing: border-box;}
    figure {
        font-family: Helvetica, serif;
        -webkit-font-smoothing: antialiased;
    }

    .table-wrapper{
        margin: 10px 1px 70px;
        box-shadow: 0 35px 50px rgba( 0, 0, 0, 0.2 );
    }

     .fl-table {
        border-radius: 5px;
        font-size: 12px;
        font-weight: normal;
        border: none;
        border-collapse: collapse;
        width: 100%;
        white-space: nowrap;
        background-color: white;
     }

     .fl-table td, .fl-table th {
        text-align: center;
        padding: 8px;
     }

     .fl-table td {
         border-right: 1px solid #f8f8f8;
         font-size: 12px;
     }

     .fl-table thead th {
         text-transform: uppercase;
         color: #ffffff;
         background: #4FC3A1;
     }


     .fl-table thead th:nth-child(odd) {
         color: #ffffff;
         background: #324960;
     }

     .fl-table tr:nth-child(even) {
         background: #F8F8F8;
     }

Джинджа

 {% for key in data %}
    <form method="post" class="form-container" id="myForm">
    <button style="display: none" type="submit" class="btn" id="sub-button">Submit</button>
    <h1>{{ key.replace("_", " ").replace(":", " ").upper() }}</h1>
    <div class="table-wrapper">
        <table class="fl-table">
            <thead>
                <tr>
                    {% for item in data[key] %}
                        <th>{{ item.replace("_", " ").replace(":", " ").upper() }}</th>
                    {% endfor %}
                </tr>
            </thead>
            <tbody>
                <tr>
                {% for item in data[key] %}
                     <td><span id={{ item }}>{{ data[key][item] }}<button id="open-button" onclick="openForm(this)">✎</button></span></td>
                {% endfor %}
                </tr>
            </tbody>
        </table>
    </div>
</form>
{% endfor %}

P. S Если кто-нибудь знает лучшее решение для отображения этих данных на сайте, пожалуйста, напишите

Комментарии:


1. Если вы ищете «отзывчивую таблицу», вы найдете похожие вещи : jsfiddle.net/90xra1ue

Метки: