CSS tips and tricks

How to force table cell content to wrap: No more expanding table cells!

tdc Tags: css cell layout table width ‎ 1 Comment ‎ 56,770 Views

Here's a CSS-only solution to prevent expanding table cell width. In many cases, html table cells expand in order to accommodate their contents. For example, you may be required to display a long, contiguous string of characters (a long URL for example) in a table cell that's narrower than the string of characters. Here's one css-only solution I stumbled upon after trying many combinations. I've tested it on the following Windows browsers: IE7, IE8, FF 3.6, Chrome 9, Opera 10, and Safari 5. Unfortunately, on Linux (Red Hat or Ubuntu) FF 3, this solution does NOT work, so beware if you have a significant Linux user base.

1. On the opening <table> tag, add a class that references the following style definition: table-layout: fixed

This alone forces cell content to wrap in IE rather than expanding the cell to fit the contents. The second part of the solution below is required for some of the other browsers in addition to this step.

2. On the opening <td> tag for the cell that contains the long string, add a class that references the following style definition: word-wrap: break-word

<html>

<head>

<title>Non-expanding table cell example</title>

table, td, th {

border: 1px solid black;

}

table.winner-table {

width: 500px;

table-layout:fixed;

text-align:left;

vertical-align:top;

padding: 5px;

}

table.winner-table tr {

vertical-align:top;

text-align:left;

}

table.winner-table td.city-table,

table.winner-table th.city-table {

width: 100px;

}

table.winner-table td.city-url,

table.winner-table th.city-url {

width: 400px;

word-wrap: break-word;

}

</style>

</head>

<body>

<tr>

<th class="city-table">Continent</th>

<th class="city-url">Smart City challenge winners</th>

</tr>

<tr>

<td class="city-table">Africa</td>

<td class="city-url"><a href="https://smartercitieschallenge.org/recipients.html?lnk=ibmhpls1/Corporate/smarterplanet/announcement/city_challenge_winners#africa">https://smartercitieschallenge.org/recipients.html?lnk=ibmhpls1/Corporate/smarterplanet/announcement/city_challenge_winners#africa</td>

</tr>

<td class="city-table">Americas</td>

<td class="city-url"><a href="https://smartercitieschallenge.org/recipients.html?lnk=ibmhpls1/Corporate/smarterplanet/announcement/city_challenge_winners#americas">https://smartercitieschallenge.org/recipients.html?lnk=ibmhpls1/Corporate/smarterplanet/announcement/city_challenge_winners#americas</td>

</tr>

</table>

</body>

</html>

Feed for Blog Entries Feed for Blog Comments Feed for Comments for this Entry

Blogs