Virus721 Virus721 - 4 months ago 20
CSS Question

Can't force <td> element to obey certain size constraints

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;

  • The table size dynamically changes using JavaScript.

  • 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.


Try table-layout: fixed; while setting the size on the <td> elements.