Question

我有一个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>

这些条件中只有一部分是成立的，这意味着每次渲染表时，每行的列数都会不同（且未知）。目前，这意味着各行之间的间距不均匀，从而导致某些行“伸出”到表格的右侧。

是否有任何方法可以确保所有行的宽度相同（即，间距确保每行的每个单元格大小相等，并且每行最右边的列的末端对齐）？

Answer 1

<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>元素来完成此工作。 / p>

Answer 2

要使每行有不确定数量的单元格时，单元格具有相同的大小，不幸的是，每个单元格都需要位于自己的表中。固然这是一团糟，但它只是html表的性质，期望可以将列对齐。

如Ito所述，如果不显示真实的表格数据（以列的主要形式），则最好使用其他元素。

请注意，您还可以使用colspan来根据总列数的最小公倍数对总列数进行伪造。我以前已经做到了，但是最终却遇到了麻烦，因为跨浏览器或不断发展的标准难以解决。

用HTML格式化动态呈现表

2 个答案: