空白：NOWRAP; 问题

Question

I have a table inside of a div, the div width is 100% and table width is 200% with overflow auto. Now the normal behavior is: when the table is displayed user must scroll to right in order to see all table columns.

If I want to set for table th class white-space:nowrap; the div will take a width bigger that ruin my form.

table.grid tr th {
    border-right: 1px solid #FFFFFF;
    white-space: nowrap;
}

Example before adding white-space:nowrap : http://tabletest.orgfree.com/

Example after adding white-space:nowrap : http://s7.postimage.org/6rw2idlmj/test.png

Answer 1

td.offersContent {
    border: 1px solid #EAEAEA;
    border-radius: 7px 7px 7px 7px;
    margin-bottom: 10px;
    padding: 0 10px;
    width: 83pc;
    *position: absolute;
    display: block;*
 }

this will fix your problem.

Answer 2

You need to create a wrapper to limit the 100% width

see my example i updated the link