即使在CSS中设置了宽度，主体的宽度仍在扩大

Question

I have set word-wrap property and width of the body of a HTML page inside CSS section, like this :

  body { width: 830px ; word-wrap: break-word;} 

This is working fine if I am writing or copying text inside it means no horizontal scrolling. Like in the below image :

But when I am copying a table from MS Word document then It's not working means word wrap is not happening with copied data expanded to the right by crossing the body width. Like in the below image :

How can I enable word wrap or disable the horizontal expansion of data?

Please help.

Answer 1

select the table and set a width to the table instead of the body

table { width: 95%;  }

Hope that helps.

Answer 2

Don't set the body's width, and you can't enable word wrap because tables don't wrap, all you have to do is to create a new div as a table container, and give it (overflow:auto) see the exemple below

http://codepen.io/anon/pen/dGxQRo

 .table_container{
   overflow:auto;
 }
 table{
  border:1px solid #000;
  width:100%;
}
table td{
  border:1px solid #000;
}