How do I get the rightmost column to fill the remaining space?

Question

Say I have a table with only three small columns. It looks untidy and unbalanced to have a narrow, tall table hugging the left side of my screen (example), so I\'d like the tabl

Answer 1

I have found a simple solution:

table td:last-child {
    width: 100%;
}

Result:

body {
    font: 12px "Sans serif";
}

table {
    width: 100%;

    background-color: #222222;
    color: white;
    border-collapse: collapse;
}

table th {
    padding: 10px;
    text-align: left;
}

table td {
    padding: 2px 10px;
}

table td:last-child {
    width: 100%;
}

table td:nth-child(odd), table th:nth-child(odd) {
    background-color: rgba(255, 255, 255, 0.05);
}

table tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.05);
}

table tr:last-child td {
    padding-bottom: 10px;
}

    

        
Product
        
Cardinality
        
Price per item
    
    

        
Apple
        
5
        
$2
    
    

        
Pear
        
3
        
$3
    
    

        
Sausage
        
10
        
$0.5
    
    

        
Pineapple
        
2
        
$8
    
    

        
Tomato
        
5
        
$1
    
    

        
Lightsaber
        
2
        
$99 999
    

This appears to work in my current scenario, but it looks like something that can cause unwanted side effects in other situations. If I stumble across any, I'll edit this answer.

Possible side effects

• Multi-word table cells will be wrapped into multiple lines to keep the column as narrow as possible. One solution is to use white-space: nowrap on the table cells, but that will hinder cells with lots of text from wrapping when they should.