不能强制 <td> 元素遵守某些尺寸限制

Question

我有一张桌子：

• 第一行和第一列（期望原点 (0;0) 单元格）包含按钮；

• 最后一行和最后一列（除了各自的第一个单元格）是空的；

• 中间的所有其他单元格（即不靠近表格边框）都是键；

• 表格大小使用 JavaScript 动态变化。

• 所有关键单元格（中间）的大小取决于它们的数量和列/行跨度。比如有 4 个水平键，如果第二个键的 colspan 为 2，则大小分别为 25%、50%、25%，而第三个键不存在。

jsFiddle 你会看得更清楚

我希望包含按钮的 <td> 元素遵守以下约束：

• 对于水平按钮集（在第一行），固定高度为 20 像素；

• 对于垂直按钮集（在第一列），固定宽度与上面的大小相同（这将导致方形 (0;0) 单元格）；

• 第一行的最后一个按钮 (class="AddCol") 必须与该行中的其他按钮具有 相同的宽度（事实并非如此，我不这样做）不明白为什么这不是自动的……）；

• 第一列的最后一个按钮 (class="AddRow") 必须与该列中的其他按钮具有相同的高度（相同）。

你知道我该怎么做吗？我试图添加隐藏内容来填充“空”单元格”，我试图强制不同元素的大小等等......但我现在没有想法。

Answer 1

在设置<td> 元素的大小时尝试table-layout: fixed;。