html - 无法强制 <td> 元素遵守某些大小限制

Question

我有一张 table :

• 第一行和第一列(原 (0;0) 单元格除外)包含按钮；

• 最后一行和最后一列(除了它们各自的第一个单元格)是空的；

• 中间的所有其他单元格(即不与表格边框相邻的单元格)都是键；

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

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

使用 jsFiddle 会看得更清楚

我想要 <td>包含遵守以下约束的按钮的元素:

• 对于水平按钮集(在第一行)，固定高度例如 20 像素；

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

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

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

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

Answer 1

尝试 table-layout: fixed;在 <td> 上设置尺寸时元素。