如何创建一个每行列数未知的 html 表，让列对齐，并为每个单元格/行设置一个 id？

Posted 2023-03-05

【中文标题】如何创建一个每行列数未知的 html 表，让列对齐，并为每个单元格/行设置一个 id？

【英文标题】：How can I create an html table, with unknown number of columns per row, get the columns to be aligned, and have an id for each cell/row?

【发布时间】：2015-04-06 19:40:25

【问题描述】：

我正在尝试使用 div 构建一个表格，并且能够获取与表格的每个单元格相关联的 id。为此，我正在使用 angularJS，并且我正在尝试让 ng-repeat 做我想做的事情。

当使用 html 表格时，我们可以使用 colspan 来定义列，因此即使列数不同，布局仍然显示对齐的表格。但是如果你不知道下一行是 2 列还是 4 列呢？你怎么能控制它？这就是我使用 div 的原因，所以我可以根据我需要的列数来调整它们的宽度。

这是我目前正在制作的小提琴： http://jsfiddle.net/xEyJZ/239/

任何帮助将不胜感激，因为我的问题是如何设置 div，以便表格看起来对齐。如果你检查小提琴，你可以看到没有一列是对齐的。理想情况下，最后一行应该居中，两列的行应该均匀地分布在整个行中，等等。

<div ng-controller="MyCtrl">
<table border="1">
    <tr ng-repeat="person in people" ng-class="rowClass(person)">
        <td>
            <div style="float:left;outline:black solid thin;" ng-click="test(person, 0)"> person.col0 </div>
            <div style="float:left;outline:black solid thin;" ng-hide="person.cols < 1" ng-click="test(person, 1)"> person.col1 </div>
            <div style="float:left;outline:black solid thin;" ng-hide="person.cols < 2" ng-click="test(person, 2)"> person.col2 </div>
            <div style="float:left;outline:black solid thin;" ng-hide="person.cols < 3" ng-click="test(person, 3)"> person.col3 </div>
        </td>
    </tr>
</table>

谁能给点启示，好吗？

【问题讨论】：

所以你的问题的标题与你真正想要的无关。

他显然是新来的，与其给他投反对票给他负面体验，不如给他一些指导。这个地方对于新来者来说可能是一个关闭。发布指南***.com/help/how-to-ask

您是始终拥有person.cols 属性...还是最终拥有cols 数组或项？

person.cols 将永远存在，它是一个整数。我添加了 person.cols 来添加我的逻辑，唯一真正重要的是 person.col0、person.col1、person.col2、person.col3 中的数据

对...但是您不想将 person.col0、person.col1... 等存储在像person.cols = ['col1','col2','col3'] 这样更具可扩展性的东西中吗？

【参考方案1】：

@jyrkim感谢您的帮助。 我设法用<div>s 建立了一个表格，其中的宽度是根据指定的列数计算的。 代码本身仍然需要优化，就像 @entropic 所建议的那样，但这里是更新的 jsfiddle 以供将来参考：

Updated fiddle