 <p>You will be able to achieve this if you set a <strong>max-width</strong> value to the desired cells you want fixed. </p> <p>Please note the fixed width must be in <strong>pixels</strong> so the cell knows when to cause overflow.</p> <p><em>(However if your table has a fixed width this is not a problem).</em></p> <pre><code>.a25{max-width:75px;} </code></pre> <p>Either <strong>overflow</strong> / <strong>text-overflow</strong> or <strong>text-wrap</strong> must also be applied to designate what the text should do. This is already present in your example. (As below)</p> <p><em>(Note .a25 is incorrectly .a24 in your demo)</em></p> <p><a href="http://jsfiddle.net/X37V7/3/" rel="nofollow"><h2>CLICK FOR WORKING DEMO</h2></a></p> <p><strong>FULL CSS (As per your demo)</strong></p> <pre><code>body{width:750px} table{ display:block; border-width: 1px; border-style: solid; border-collapse: collapse; width: 100%; overflow: hidden; } #fx{ table-layout: fixed; overflow: hidden; } #fx2{ table-layout: fixed; } tr, th, td{ border-width:1px; border-style: solid; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } th{ width: 5%; } .over{overflow: hidden;} .a25{width:10%;max-width:75px;} .a75{width:60%} .he{height:130px;} .rotate{-webkit-transform:rotate(270deg);} .rr{height:-1px;width:130px;margin-left:-30px;} </code></pre> <hr> <p><a href="http://jsfiddle.net/X37V7/4/" rel="nofollow"><h2>CLICK FOR CLEAN DEMO</h2></a></p> <p><strong>CSS (CLEAN VERSION)</strong></p> <pre><code>table{ table-layout: fixed; border-collapse: collapse; width: 100%; } tr, th, td{ border:1px solid #888; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .w25{width:10%;max-width:75px;} .w75{width:60%} .h130{height:130px;} </code></pre> <p>This example is currently a fluid table with overflow.</p> <p>To fixed cell size either replace <strong>max-width</strong> with <strong>width</strong> or replace <strong>table width</strong> with <strong>fixed</strong> value.</p>