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

How about some CSS3 grid layout:

.grid {
    display: grid;    
    grid-template-columns: minmax(1fr, auto) auto;
}

.label {
    grid-column: 1;
    word-break: break-all;
    max-width: 300px;
}

.value {
    grid-column: 2;
}

    
Short Header
    
value




    
Short Header
    
value
    
Quite Long Header
    
value
    
Short Header
    
value




    
Short Header
    
value
    
Quite Long Header
    
value
    
MMMMMMMMMMMMMMMMMMMMMMMMMMMassiveHeader
    
value
    
Quite Long Header
    
value

To see this in action, you'll have to use Chrome, go to chrome://flags and enable the Enable experimental Web Platform features option.

Obviously this isn't much use at the moment but certainly something to look forward to!