CODEWITHSUNDEEP
htmlcsshtml-tablejinja2
Matt
Matt

Reputation: 189

Formatting dynamically rendering table in HTML

I have an HTML table thats rows are populated by jinja2 tags:

<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>

Only some of these conditions are going to be true, meaning that there are going to be a different (and unknown) number of columns per row each time the table is rendered. At the moment, this means that the rows are unevenly spaced, resulting in some rows 'sticking out' of the right side of the table.

Is there any way to ensure that all rows are the same width (i.e. spaced so that each cell per row is of equal size, and that the end of the rightmost column on each row lines up)?

Upvotes: 0

Views: 385

Answers (2)

gremlin
gremlin

Reputation: 73

To get the cells to be the same size when there's an indeterminate number of cells per row, unfortunately they each need to be in their own table. Which is admittedly messy, but it's just the nature of html tables that there is an expectation of lining up the columns.

As Ito mentioned, you may be better off using some other element if not displaying true tabular data (in column major form).

Note, you could also use colspan to kind of fake things with a total number of columns based on the lowest common multiple of the possible number of columns. I have accomplished this before, but it ends up quite hackish with difficulties working cross-browser or through evolving standards.

Upvotes: 1

Ito Pizarro
Ito Pizarro

Reputation: 1607

The <table> element is going to try to establish a columnar relationship based on the row with the greatest number of cells.

To accomplish what you are after, I think you'd need to override the inherent display properties of your table's <tr> — probably with 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>

I should note that, because a <table> element has semantic meaning — which is somewhat obfuscated by overriding the tabular structure with Flexbox — you might be better served by using <div> elements to accomplish this.

Upvotes: 1

Related Questions