Make td expand to max width before text wraps

Question

I feel like there's a simple way to do this, but I just can't think of/find a solution...

I have a <table> that that should scroll-x if it overflows (which it's expected to) The <td> elements are set to max-width: 300px. I want the text in the <td> to wrap ONLY AFTER the <td> has hit the max-width. Right now text is wrapping as soon as the <table> doesn't fit its parent <div>.

How can I make the <td> expand to its max width before the text wraps?

Here's a fiddle: https://jsfiddle.net/ds99unpz/2/

EDIT: to clarify...

If the td doesn't have to be 300px wide to fit the text on one line, I don't want it to be 300px. If the text is too long to fit in a 300px td, THEN I want the td to be 300px wide and the text to wrap.

Answer 1

I updated your JSFiddle. It coerces the tables and cells to act like block's and inline-block's, respectively. Then using a little white-space: nowrap; magic and forcing the table to overflow, we get the desired result. However, the cells aren't all the same height.

Answer 2

.scrollable {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
   
}
table{
    
    height: 150px;
    
}
td {
    max-width: 200px;
    white-space:nowrap;
    overflow-x: scroll;
}

<table class="table table-striped">
                    <tr>
                    <td style="white-space: nowrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
                    <td >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
                    <td >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
                    <td >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
                    <td >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
                        <td >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
                    <tr>
                        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
                    <td >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
                    <td >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
                    <td >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
                    <td >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
                    <td >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
                    </tr>
                </table>

EDIT:,

Added style="white-space: nowrap" to <td>

HTML:

<table class="table table-striped">
                    <tr>
                    <td style="white-space: nowrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
                    <td style="white-space: nowrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
                    <td style="white-space: nowrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
                    <td style="white-space: nowrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
                    <td style="white-space: nowrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
                        <td style="white-space: nowrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
                    <tr>
                        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
                    <td style="white-space: nowrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
                    <td style="white-space: nowrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
                    <td style="white-space: nowrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
                    <td style="white-space: nowrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
                    <td style="white-space: nowrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
                    </tr>
                </table>

CSS:

.scrollable {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;

}
table{

    height: 150px;

}
td {
    max-width: 200px;
    white-space:nowrap;
    overflow-x: scroll;
}

Fiddle

Or all css

<table class="table table-striped">
                    <tr>
                    <td style="white-space: nowrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
                    <td >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
                    <td >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
                    <td >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
                    <td >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
                        <td >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
                    <tr>
                        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
                    <td >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
                    <td >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
                    <td >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
                    <td >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
                    <td >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
                    </tr>
                </table>

CSS:

.scrollable {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;

}
table{

    height: 150px;

}
td {
    max-width: 200px;
    white-space:nowrap;
    overflow-x: scroll;
}

Fiddle