Table width in IE7/8

css, html, html-table

Solution

Try this in your CSS:

table {
    table-layout: fixed;
}

Problem

I'm getting crazy with getting my table look right on different browsers, just when I think I got in one it changes in the other. IE7/8 and Firefox are my target browsers. Could someone please have a look at the code I just can't figure out what's the problem. Table is generated by Javascript, I need it have fixed width of 220px, the main problem is tfoot where I have 3 tds for which I'm having problems controlling width. Here is the relevant portion of the code: ``` <table class="favouritelinks" cellspacing="0" cellpadding="0" width="220" > <thead> <tr><td colspan="3">Your Favourite Links</td></tr> </thead> <tbody id="tulemused" ></tbody> <tr> <td width="50">Name</td><td><input type="text" id="key" name="key" value="" /></td> <td rowspan="2"><a href="javascript:insert_value()"><div class="addimg"></div></a></td> </tr> <tr> <td width="50">URL</td><td><input type="text" id="val" name="val" value="" /></td> </tr> </table> ``` and css: ``` .favouritelinks td{ height: 20px; padding: 3px; border-bottom: 1px solid white; word-break: break-all; } .favouritelinks td a{ color: white; text-decoration: none; } thead{ background: url(img/title5.png) no-repeat; color: #444; font: bold 16px Helvetica; text-shadow: 0 1px 0 #FFF; text-align: center; width: 220px; height: 36px; } thead tr { height: 36px; } .container{ width: 220px; margin-top: 105px; margin-left: 10px; } .delimg { background: url(img/details_close.png) no-repeat; width: 20px; height: 20px; float: right; } .addimg { background: url(img/details_open.png) no-repeat; width: 20px; height: 20px; float: right; } .urls { display: none; } ``` What am I doing wrong? Picture http://imageshack.us/photo/my-images/38/56751263.jpg/

Original source