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

Let me know if this is what you are looking for:

remove white-space:nowrap and word-break:break-all and add word-wrap:break-word

see snippet below:

table {
    width: 100%;
}

th {
    text-align: right;
    width: 10px;
    max-width: 300px;
    word-wrap:break-word    
}

    

        
Short Header
        
value
    




    

        
Short Header
        
value
    
    

        
Quite Long Header
        
value
    




    

        
Short Header
        
value
    
    

        
Quite Long Header
        
value
    
    

        
MMMMMMMMMMMMMMMMMMMMMMMMMMMassiveHeader
        
value
    

UPDATE: OP Comment - may 18th

Thanks, this is close, but it shouldn't wrap the short headers: it should only start wrapping once the header column reaches the max-width

Add a min-width to th that fits you the best. (Note that th which will break words don't receive the min-width) as pointed out by @Pangloss in a comment to another answer.

see snippet below:

table {
    width: 100%;
}

th {
    text-align: right;
    width: 10px;
    min-width:133px; /* change the value for whatever fits you better */
    max-width: 300px;
    word-wrap:break-word    
}

    

        
Short Header
        
value
    




    

        
Short Header
        
value
    
    

        
Quite Long Header
        
value
    




    

        
Short Header
        
value
    
    

        
Quite Long Header
        
value
    
    

        
MMMMMMMMMMMMMMMMMMMMMMMMMMMassiveHeader
        
value