CODEWITHSUNDEEP
htmlcsshtml-tablewidth
ahmd0
ahmd0

Reputation: 17293

How limit the width of a table with CSS or event HTML?

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.

Upvotes: 0

Views: 135

Answers (3)

ShibinRagh
ShibinRagh

Reputation: 6646

td{word-wrap:break-word;
max-width: 750px;}

Upvotes: 1

sandeep
sandeep

Reputation: 92803

Write like this:

.tableClass{
 display-layout:fixed;
 word-wrap: break-word;
}

Upvotes: 1

xiaoyi
xiaoyi

Reputation: 6741

.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.

Upvotes: 3

Related Questions