表中具有任意列数的自动换行符

Question

在我的项目中，我有一个供不同组件使用的表的模板，因此每个组件都有不同数量的列和不同的标题。这是表格：

<table class="table">
                                <thead class="table-header">
                                    <th *ngFor="let column of tableConfiguration.tableColumns">
                                        {{ column | translate }}
                                    </th>
                                    <th *ngIf="tableConfiguration.tableActions != null">
                                        {{ "column_actions" | translate }}
                                    </th>
                                </thead>
                                <tbody>
                                    <tr *ngFor="let row of tableConfiguration.tableData; let i = index">
                                        <td *ngFor="let col of row; let j = index">
                                            <span>
                                                {{ col }}
                                            </span>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>

有时{{col}}的文本很长，因此如果文本超过一定宽度（该宽度应与当前表的列数成比例），我想自动放置新行。
基本上，如果我有5列，则每列的最大宽度应为总数的20％，然后，如果我有2列，则每列的最大宽度应为50％。然后，应通过自动拆分相应地显示文本，如果超过最大宽度，则换行（或多行）。
如何在html / css中翻译？