I have a table :
- The first row and column (expect the origin (0;0) cell) contain buttons;
- The last row and column (expect their first respective cells) are empty;
- All other cells in the middle (i.e not adjacent to a table border) are keys;
- All key cells (in the middle) have a size that depends on their number, and col/row-span. For example, with 4 horizontal keys, if the second key has a colspan of 2, the sizes are 25%, 50%, 25%, and the third key doesn't exist.
You will see better with a jsFiddle
I would like the
elements containing buttons to respect the following constraints :
- For the horizontal button set (on the first row), a fixed height of say 20 pixels;
- for the vertical button set (on the first column), a fixed width of the same size as above (that would result in a square (0;0) cell);
- The last button of the first row (class="AddCol") must have the same width as the other buttons in that row (it is not the case, and i don't understand why this is not automatic...);
- The last button of the first column (class="AddRow") must have the same height as the other buttons in that column (same).
Do you know how I could do that ? I tried to add hidden content to fill "empty" cells", I tried to force the size of different elements, etc... but I'm out of ideas right now.