Question

I was curious if this is possible with CSS, or even HTML? Say, I have a parent DIV that houses a TABLE:

<div class="divClass">
<table class="tableClass">
</table>
</div>

The table displays user content, so I have no control over its text. Is there any way to limit the width of the table so that it doesn’t go over, say 750 pixels?

PS. Normally table cells wrap words to the next line if there’s not enough width, but problem happens forWordsLikeThisWithoutAnyActualWhiteSpacesBetweenThem. In that case the table gets too wide and destroys the page layout.

Answer 1

.tableClass {
   max-width: 750px
   word-break: break-all;
 }

should do the work.

or you may also try

.tableClass {
   table-layout:fixed;
}
.tableClass td {
   overflow: hidden;
}

and assign width for each tds in the first line.