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

@Douglas :I think you done all things properly. but as in your given example and in question you said you want narrow header so you given 10px width to th. but if you want to achive 10px width in your example then remove only white-space: nowrap;

Then it loook like Example 1.

Example 1: https://jsfiddle.net/2avm4a6n/20/

Example 2: As all user given answer you can do that way also

Example 3: there is another option for you if you want to use white-space: nowrap; then apply one more thing i.e text-overflow: ellipsis; overflow: hidden; https://jsfiddle.net/2avm4a6n/21/

 text-overflow: ellipsis;
 overflow: hidden;

EDIT

And use text-align: left; if you want text to be start from left side

Answer 2

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%;
}

<table border="1">
    <tr>
        <th>Short Header</th>
        <td>value</td>
    </tr>
</table>
<br />
<table border="1">
    <tr>
        <th>Short Header</th>
        <td>value</td>
    </tr>
    <tr>
        <th>Quite Long Header</th>
        <td>value</td>
    </tr>
</table>
<br />
<table border="1">
    <tr>
        <th>Short Header</th>
        <td>value</td>
    </tr>
    <tr>
        <th>Quite Long Header</th>
        <td>value</td>
    </tr>
    <tr>
        <th>MMMMMMMMMMMMMMMMMMMMMMMMMMMassiveHeader</th>
        <td>value</td>
    </tr>
</table>

Answer 3

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    
}

<table border="1">
    <tr>
        <th>Short Header</th>
        <td>value</td>
    </tr>
</table>
<br />
<table border="1">
    <tr>
        <th>Short Header</th>
        <td>value</td>
    </tr>
    <tr>
        <th>Quite Long Header</th>
        <td>value</td>
    </tr>
</table>
<br />
<table border="1">
    <tr>
        <th>Short Header</th>
        <td>value</td>
    </tr>
    <tr>
        <th>Quite Long Header</th>
        <td>value</td>
    </tr>
    <tr>
        <th>MMMMMMMMMMMMMMMMMMMMMMMMMMMassiveHeader</th>
        <td>value</td>
    </tr>
</table>

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    
}

<table border="1">
    <tr>
        <th>Short Header</th>
        <td>value</td>
    </tr>
</table>
<br />
<table border="1">
    <tr>
        <th>Short Header</th>
        <td>value</td>
    </tr>
    <tr>
        <th>Quite Long Header</th>
        <td>value</td>
    </tr>
</table>
<br />
<table border="1">
    <tr>
        <th>Short Header</th>
        <td>value</td>
    </tr>
    <tr>
        <th>Quite Long Header</th>
        <td>value</td>
    </tr>
    <tr>
        <th>MMMMMMMMMMMMMMMMMMMMMMMMMMMassiveHeader</th>
        <td>value</td>
    </tr>
</table>

Answer 4

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;
}

<div class="grid">
    <div class="label">Short Header</div>
    <div class="value">value</div>
</div>
<br/>
<div class="grid">
    <div class="label">Short Header</div>
    <div class="value">value</div>
    <div class="label">Quite Long Header</div>
    <div class="value">value</div>
    <div class="label">Short Header</div>
    <div class="value">value</div>
</div>
<br/>
<div class="grid">
    <div class="label">Short Header</div>
    <div class="value">value</div>
    <div class="label">Quite Long Header</div>
    <div class="value">value</div>
    <div class="label">MMMMMMMMMMMMMMMMMMMMMMMMMMMassiveHeader</div>
    <div class="value">value</div>
    <div class="label">Quite Long Header</div>
    <div class="value">value</div>
</div>

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!

Answer 5

If you know what the data is in the <th> already, you could then wrap the long length text into a <span> 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%;
}

<table border="1">
    <tr>
        <th>Short Header</th>
        <td>value</td>
    </tr>
</table>
<br />
<table border="1">
    <tr>
        <th>Short Header</th>
        <td>value</td>
    </tr>
    <tr>
        <th>Quite Long Header</th>
        <td>value</td>
    </tr>
</table>
<br />
<table border="1">
    <tr>
        <th>Short Header</th>
        <td>value</td>
    </tr>
    <tr>
        <th>Quite Long Header</th>
        <td>value</td>
    </tr>
    <tr>
        <th><span>MMMMMMMMMMMMMMMMMMMMMMMMMMMassiveHeader</span></th>
        <td>value</td>
    </tr>
</table>

Answer 6

You can achieve this by giving a width to the "th" and make the text-align:left

html

 <table border="1">
        <tr>
            <th>Short Header</th>
            <td>value</td>
        </tr>
    </table>
    <br />
    <table border="1">
        <tr>
            <th>Short Header</th>
            <td>value</td>
        </tr>
        <tr>
            <th>Quite Long Header</th>
            <td>value</td>
        </tr>
    </table>
    <br />
    <table border="1">
        <tr>
            <th>Short Header</th>
            <td>value</td>
        </tr>
        <tr>
            <th>Quite Long Header</th>
            <td>value</td>
        </tr>
        <tr>
            <th>MMMMMMMMMMMMMMMMMMMMMMMMMMMassiveHeader</th>
            <td>value</td>
        </tr>
    </table>

css

table {
    width: 100%;
}

th {
    text-align: left;
    width: 500px;
}

Working fiddle: https://jsfiddle.net/2avm4a6n/16/