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

If you know what the data is in the already, you could then wrap the long length text into a tag or so, and adjust the CSS slightly for that.

UPDATED JSFIDDLE

table {
    width: 100%;
}
th {
    text-align: right;
    white-space: nowrap;
}
th span {
    white-space: normal;
    word-break: break-all;
    display: block;
}
td {
    width: 100%;
}

    

        
Short Header
        
value
    




    

        
Short Header
        
value
    
    

        
Quite Long Header
        
value
    




    

        
Short Header
        
value
    
    

        
Quite Long Header
        
value
    
    

        
MMMMMMMMMMMMMMMMMMMMMMMMMMMassiveHeader
        
value