Douglas Douglas - 3 months ago 18
CSS Question

How to wrap table cell at a maximum width in full width table

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 width of the page. The headers should all be on a single line, unless the content of the header cell is very long, at which point the header should wrap onto multiple lines.

With short content, this works:

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


CSS:

table {
width: 100%;
}

th {
text-align: right;
width: 10px;
white-space: nowrap;
}


However, when I try to add a maximum width, instead of wrapping, the content spills out of the text box:

table {
width: 100%;
}

th {
text-align: right;
width: 10px;
white-space: nowrap;
max-width: 300px;
word-break: break-all;
}


Demo: https://jsfiddle.net/2avm4a6n/

It seems that the
white-space: nowrap;
style overrides the
word-break: break-all;
, so the
max-width: 300px;
causes the text to spill out. I'm using the
white-space: nowrap;
and
width: 10px;
combination to make the header column as narrow as possible, without wrapping headers with spaces in below the minimum width, but having just the
width: 10px;
and the
word-break: break-all;
causes the headers to wrap into single characters to fit in the narrow 10px.

Any idea how to do this with css?

Answer

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>

Comments