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 o