Stop wrapping text in cells

So you have a table layout in a stretchy admin system.

As the browser is resized, the table columns resize, and the text within those columns wraps around onto multiple lines.

The client doesn’t like this, especially when viewing on his iphone. Client would like the information to appear in a single line. The content needs to be automatically overflow:hidden’d within the table layout.

Here’s one way:

http://www.blakems.com/archives/000077.html

Here is code that sorta works as the browser window is resized:

<table>
<thead><tr><th>Col 1</th><th width="50">Col 2</th><th width="70">Col 3</th></tr></thead>
<tbody>
<tr>
<td>
<div style="overflow:hidden; height:15px;">
really long text to appear here... this text should wrap to a single line... text .. text .. text .. text .. text .. text .. text .. text .. 
</div>
</td>
<td>short text</td>
<td>short text</td>
</tr>
</tbody>
</table>

http://dtbaker.com.au/testing-html.html

How would you do this?

Javascript? Pure CSS data layout? CSS + HTML Table?

Use an @media query for mobile browser size and apply overflow:hidden.

Use an @media query for mobile browser size and apply overflow:hidden.

unfortunately overflow:hidden; doesn’t work on a td out of the box, still wraps on multiple lines

Use an @media query for mobile browser size and apply overflow:hidden.

You are correct! If you set table-layout:fixed; on the table, then overflow:hidden; white-space:nowrap; does the trick .

http://dtbaker.com.au/testing-html.html