html - 如何确保动态表为每一列提供适当百分比的空间？

Question

我正在处理一个可以增长到 6 行的动态表。

我想确保列始终等距，例如 50-50 如果有 2 或 33-33-33 如果有 3，或者 25-25-25-25 如果有 4。

这是表格的示例:https://codepen.io/maketroli/pen/pZvXoJ

表格的 css 从 第 94 行 开始。 在第 104 行中，我有这样的内容:width: 50%; 因为一开始表格只有 2 列，但现在情况发生了变化。

我也在使用 Handlebars ，所以也许也有解决方案。

{{#with table}}
    <table class="submasthead-item__table">
        {{#if headings}}
            <thead>{{#each headings}}<th>{{{this}}}</th>{{/each}}</thead>
        {{/if}}
        <tbody>
        {{#each values}}
            <tr>
                {{#eachIndex this}}
                    <td {{#is ../../text-red true}}{{#is index 1}}class="text--brightRed"{{/is}}{{/is}}>
                        {{item}}
                    </td>
                {{/eachIndex}}
            </tr>
        {{/each}}
        </tbody>
    </table>
{{/with}}

那么，我该如何计算呢？

更新:

我不能为这个表使用 flexbox。是一项要求，因为它会带来可访问性问题。

Answer 1

你可以做类似 <tr class="col-{{array.length}}"><th>...</th></tr> 的事情打印将循环多少列，然后分配 CSS:

tr.col-2 th {
   width: 50%;
}
tr.col-3 th {
   width: 33.334%;
}
tr.col-4 th {
   width: 25%;
}
tr.col-5 th {
   width: 20%;
}

等等……