css - Force HTML Tables To Not Exceed Their Containers' Size -

this question has been asked several times, none of answers provided seem me:

see in action here: http://jsfiddle.net/blam/bsqnj/2/

i have "dynamic" (percentage based) layout 2 columns.

.grid {     width: 100%;     box-sizing: border-box; } .grid > * {     box-sizing: border-box;     margin: 0; } .grid .col50 {     padding: 0 1.5%;     float: left;     width: 50%; } 

in each of these columns have table supposed use full column width.

.data-table {     width: 100%; } .data-table td {     white-space: nowrap;     text-overflow: ellipsis;     overflow: hidden; } 

my problem of columns in table have content needs truncated fit in given width of table. not happen, though. 2 tables overlaying each other.

requirements:

• needs percentage based. can't set absolute sizes.
• each rows' height must not grow beyond 1 text line (which happen if remove white-space: nowrap)
• must work in chrome, firefox , internet explorer 8+
• can't display tables below each other has fit onto 1 sheet of paper when printing.

what tried:

• inside of , use width , overflow on that. changed nothing.
• "display: table;" on containing div - instead of having 2 columns tables displayed below each other
• "table-layout: fixed;" - forced columns have same width
• i know columns 2+3 have total of 30% of width tried manually set column 1 70% - did not change anything
• zero-width spaces in content - didn't change anything, due white-space: nowrap;

related questions:

• table width exceeds container's width
• how prevent html table stretching
• html css how stop table cell expanding
• table overflowing outside of div

you need add table-layout property:

table-layout: fixed; 

also include width=100% in table html tag, not style tag.

http://jsfiddle.net/reek5/