Forum Moderators: not2easy
I'm having a bit of a problem with a table that is set to 100% wide and has a 1px border.
In IE it all lines up fine with the divs above and below it but in Firefox the table seems to be 1 pixel too wide.
I have tried messing with the border-collapse etc. but have run out of ideas. Anyone know why this might be happening?
Thanks, Jon
Here is my code - (sorry, can't get it to indent properly oon here)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" />
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Grid Example</title>
<style type="text/css">
.Container{width:700px; border:solid 1px gray; padding:20px; margin:auto; margin-top:30px;}
.Header{font-size:14px; background-color:#94AEBE; padding:5px; color:White;}
.Footer{font-size:14px; background-color:#94AEBE; padding:5px; color:White;}
table{width:100%; border:solid 1px #AEC2CE; border-collapse:collapse;}
.Grid table th{padding:5px; background-color:#AEC2CE; text-align:left; font-size:14px; font-weight:bold; color:#456172;}
.Grid table td{padding:5px; color:#466475; font-size:13px;}
</style>
</head>
<body>
<div class="Container">
<!-- Test table goes here -->
<div class="Grid">
<div class="Header">
Header Goes Here
</div>
<table>
<thead>
<tr>
<th>Country</th>
<th>Country Code</th>
<th>Currency</th>
<th>VAT Applicable</th>
</tr>
</thead>
<tbody>
<tr>
<td>England</td>
<td>ENG</td>
<td>GBP</td>
<td>YES</td>
</tr>
<tr>
<td>Northern Ireland</td>
<td>NRI</td>
<td>GBP</td>
<td>YES</td>
</tr>
</tbody>
</table>
<div class="Footer">
Footer Goes Here
</div>
</div>
</div>
</body>
</html>
Probably a hack, but the following works:
.Grid table td{padding:5px; color:#466475; font-size:13px;}
<table cellspacing="0">
That doesn't seem to have worked for me, sorry.
Removing border-collapse seems to make it work,
Keeping border-collapse, Setting it to display:block (still with the width:100%) seems to also work.
Considering you are on a fixed-width page, couldn't you just size it relative to the 700px container? 698px +2px for border. IE (or others) might still render it differently though?
[w3.org...]
That link should give some critical information as to how tables and their borders are rendered using the collapsed border model.
[edited by: Xapti at 1:53 am (utc) on Nov. 27, 2007]
