How to wrap table cell at a maximum width in full width table

Question

I\'d like to have a table with headers down the left hand side, the headers should be as narrow as possible, and the space for the values should take up the rest of the widt

Answer 1

@Douglas :I think you done all things properly. but as in your given example and in question you said you want narrow header so you given 10px width to th. but if you want to achive 10px width in your example then remove only white-space: nowrap;

Then it loook like Example 1.

Example 1: https://jsfiddle.net/2avm4a6n/20/

Example 2: As all user given answer you can do that way also

Example 3: there is another option for you if you want to use white-space: nowrap; then apply one more thing i.e text-overflow: ellipsis; overflow: hidden; https://jsfiddle.net/2avm4a6n/21/

 text-overflow: ellipsis;
 overflow: hidden;

EDIT

And use text-align: left; if you want text to be start from left side