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


Tags: html,css

Problem :

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?



Solution :

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>


    CSS Howto..

    How to make an entire square div clickable with CSS?

    How to Make a materialize CSS button's width same as col s12?

    How achieve rounded shadow behide a rounded element using css3

    how to animate a div towards different direction and fade out using jquery

    How can I call ajax, without “link_to” kind of helpers?

    (CSS) How to position the Div near to the bottom right corner of the browser Relatively to the Browser Size? [closed]

    In CSS, how to select a particular tag under mutiple ids?

    How to set columns 100% height within body using css

    How can I base one CSS setting on another?

    In CSS/JS, how to word-wrap at every nth word?

    How to decrease spacing between bootstrap glyphicons

    how to overwrite button's non-hover state colour to grey, but when hover button show the colour (with css framework)

    How to style button inputs to be identical in Chrome and Firefox?

    How to accomplish this layout with CSS and HTML?

    How to override html property created by script (mediaelement.js)

    How to set textbox width fit in table cell CSS

    How to drag and drop a div changing the css left and top attributes in HTML 5?

    how to place image on image?

    how to put image and texts on img html css

    How to add lines to
  • elemtents
  • How to animate through stacked images Javascript

    How to solve this layout design-error due to conflicting css?

    How do I make a CSS sprite that controls multiple background images for multiple DIV's?

    How to expand an abbreviated word onhover in html via css or javascript or even using jquery?

    How to implement easeOutBack easing in css transform animation

    how to make certain css 3d effect works in IE

    How can I make a Div that stays on its position?

    How to get cards with his content perfectly alligned

    How to reference CSS file in a javascript only class

    How can I include a CSS stylesheet in an XSL document for Internet Explorer?