Table's text outside container when table has bigger width to container

HTML & CSS
1

I have a description field which used html editor to let user fill in what they want.
When they copy text somewhere with table style with width more than the width of that container(430px),
text inside that table will be expand outside the container.

Anyway to fix it?

<div class=“templatetext comment-text” style=“”>
<!-- START description field –>
<p>
  </p>
<span>
<table border=“0” cellpadding=“0” cellspacing=“0” style=“width:448px;” width=“448”>
<tbody><tr><td>TEXT HERE</td></tr></tbody>
</table>
</span>
<!-- END description field –>
</div>

I did added css below but same situation :
<style>
.comment-text {
width:407px;
word-wrap: break-word;
}</style>

2

Three things:

  1. you declared the width of the table twice in your HTML/inline CSS
  2. the declared width of the table is wider than your container if your container is 430px and your table is 438px, your table will over flow the container
  3. the property you should be looking for in your style sheet is “white-space:nowrap;” that may or may not be causing the issue
3
  1. User copied text somewhere with its styles and paste to description field. Can’t control by me;
  2. I understand it but can’t control by me;
  3. white-space:nowrap isn’t causing it.
4

Well what do you want done? Do you want the container to expand to allow more room? Do you want scrollbars? What is your ideal situation?

5

Post a complete working page or post a link to the site where it is being developed. We need to see more code to assess your options.

EDIT:
You can try something like this:


.comment-text span table {
    width:100% !important;
}
6

It worked. Thank you. :slight_smile:

7

Super! You’re very welcome. Thanks for the feedback!