CODEWITHSUNDEEP
csshtml-table
IS4
IS4

Reputation: 13227

Allow table to expand over max-width in Google Chrome

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

Answers (1)

Dev Shangari
Dev Shangari

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

Related Questions