Форматирование таблицы динамического рендеринга в HTML - PullRequest
Новая
       23

Форматирование таблицы динамического рендеринга в HTML

0 голосов
/ 07 марта 2019

У меня есть HTML-таблица, строки которой заполняются тегами jinja2: 

<table cellpadding="10">
    <tr>
        <td colspan="4">{{element1}}</td>
    </tr>
    <tr class="playerrow">
        {% if condition1 = True %} <td>{{element2}}</td> {% endif %}
        {% if condition2 = True %} <td>{{element3}}</td> {% endif %}
        {% if condition3 = True %} <td>{{element4}}</td> {% endif %}
        {% if condition4 = True %} <td>{{element5}}</td> {% endif %}
        {% if condition5 = True %} <td>{{element6}}</td> {% endif %}
    </tr>
    <tr class="playerrow">
        {% if condition6 = True %} <td>{{element6}}</td> {% endif %}
        {% if condition7 = True %} <td>{{element7}}</td> {% endif %}
        {% if condition8 = True %} <td>{{element8}}</td> {% endif %}
        {% if condition9 = True %} <td>{{element9}}</td> {% endif %}
        {% if condition10 = True %} <td>{{element}}</td> {% endif %}
    </tr>
    <tr class="playerrow">
        {% if condition11 = True %} <td>{{element11}}</td> {% endif %}
        {% if condition12 = True %} <td>{{element12}}</td> {% endif %}
        {% if condition13 = True %} <td>{{element13}}</td> {% endif %}
    </tr>
</table>

Только некоторые из этих условий будут выполняться, то есть будет другое (и неизвестное) числостолбцов в строке каждый раз, когда таблица отображается.На данный момент это означает, что строки расположены неравномерно, в результате чего некоторые строки «торчат» с правой стороны таблицы.

Есть ли способ гарантировать, что все строки имеют одинаковую ширину (т.е.разнесены так, чтобы каждая ячейка в строке имела одинаковый размер, а конец самого правого столбца в каждой строке располагался на одном уровне)?

Ответы [ 2 ]

1 голос
/ 08 марта 2019

Чтобы получить одинаковый размер ячеек при неопределенном количестве ячеек в строке, к сожалению, каждая из них должна находиться в своей таблице.Это, по общему признанию, грязно, но это просто природа таблиц html, что есть вероятность выстроить столбцы в ряд.в основной форме столбца).

Обратите внимание, что вы также можете использовать colspan для фальсификации вещей с общим числом столбцов на основе наименьшего общего кратного из возможного количества столбцов.Я достиг этого раньше, но в итоге получаю довольно хакерские трудности с кросс-браузерной работой или развитием стандартов.

1 голос
/ 07 марта 2019

Элемент <table> попытается установить столбчатую связь на основе строки с наибольшим количеством ячеек.

Чтобы выполнить то, что вам нужно, я думаю, вам нужно переопределить display свойства вашей таблицы <tr> - возможно, с помощью Flexbox. 

table {
  border: 2px solid #ddd;
}

tr {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

tr td {
  border: 1px solid #bbb;
  flex: 1 1 auto;
}
<table cellpadding="10">
  <tr>
    <td colspan="4">element 1</td>
  </tr>
  <tr class="playerrow">
    <td>element 2</td>
    <td>element 4</td>
    <td>element 5</td>
  </tr>
  <tr class="playerrow">
    <td>element 7</td>
    <td>element 10</td>
  </tr>
  <tr class="playerrow">
    <td>element 11</td>
    <td>element 12</td>
  </tr>
</table>

Следует отметить, что, поскольку элемент <table> имеет семантическое значение - что несколько запутывает его за счет переопределения табличной структуры с помощью Flexbox - вам может быть лучше использовать элементы <div> для достижения этой цели.

...