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

Remove the table width, from th remove the width, the white-space, and the word-break. Add to the th word-wrap: word-break

I also suggest you to set min-width: 150px or any value you want. Also add this td { width: 100%;}.

Here is the jsFiddle

th {
    text-align: right;
    max-width: 300px;
    min-width: 150px;
    word-wrap: break-word;
}
td {
    width: 100%;
}

    

        
Short Header
        
value
    




    

        
Short Header
        
value
    
    

        
Quite Long Header
        
value
    




    

        
Short Header
        
value
    
    

        
Quite Long Header
        
value
    
    

        
MMMMMMMMMMMMMMMMMMMMMMMMMMMassiveHeader
        
value