Reputation: 13227
I have a table with max-width: 300px;
. In Mozilla Firefox, IE, and Opera, if the content of the table is wider than 300 px, it tries to break it. If it can't be broken, it allows the table to resize over 300 px. How can I achieve this behaviour in Google Chrome?
Edit:
<table style="max-width: 300px; background-color: yellow;">
<tr><td>Lorem ipsum dolor sit amet consectetuer euismod nibh amet Vestibulum ornare. Natoque convallis auctor arcu ac.</td></tr>
<tr><td>LoremipsumdolorsitametconsectetuereuismodnibhametVestibulumornareNatoqueconvallisauctorarcuac.</td></tr>
</table>
In Firefox the table is 625 px wide. The text is dynamically generated.
Upvotes: 0
Views: 884
Reputation: 336
Just add the following style to the table or the cells
word-break: break-all;
This will force the work to break even if it does not have spaces and not break the tables width, and it wont force you to set a min-width / width on the table either.
Edit:
This should give you the desired behavior:
<html>
<head>
<style type="text/css">
table {
width: auto;
}
</style>
</head>
<body>
<div style= "max-width: 300px">
<table style="background-color: yellow;">
<tr class="text"><td><div>Lorem ipsum dolor sit amet consectetuer euismod nibh amet Vestibulum ornare. Natoque convallis auctor arcu ac.</div></td></tr>
<tr class="text"><td>
LoremipsumdolorsitametconsectetuereuismodnibhametVestibulumornareNatoqueconvallisauctorarcuac.
</td></tr>
</table>
</div>
</body>
</html>
Upvotes: 1