Question

I have a cell that is 10% wide with a couple words in it. When you shrink the window size, the size keeps getting smaller until it matches the length of the text inside and then it stops shrinking. I want it to stay at an exact 10% wide. How do I do this?

Sorry, working with divs is not an option.

Answer 1

This might do the trick:

#your_table {
  table-layout: fixed;
}

Tables can (should, as it’s up to browsers to implement this) have two types of layouts:

1. table-layout: fixed: This is the “stupid” table layout. The table doesn’t care about its contents and just resizes carelessly.
2. table-layout: auto: This is the “smart” table layout. The table cares about it’s contents and stops resizing cells once the minimum width and height of a cell is reached. This is default table behavior.

Thank you W3C: http://www.w3.org/TR/CSS2/tables.html#propdef-table-layout