I have exhausted all potential solutions found on the internet and still cannot seem to solve this issue.
Here is an example page that highlights the problem:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Title Goes Here</title>
</head>
<body>
<style>
.centered_text {
text-align:center;
}
.datagrid table {
width: 100%;
border-spacing: 0px;
}
.datagrid {
background: #FFFEE1;
border: thick solid #A31B2B;
}
.datagrid table td, .datagrid table th {
padding: 3px;
}
.datagrid table tbody tr td {
border: thick solid #A31B2B;
}
</style>
<div class="centered_text datagrid">
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
</div>
</body>
Although the layout appears as desired in Chrome or IE10 with no space between the div and table borders, switching to IE7 Document mode reveals unwanted spacing around the table.
Unfortunately, we still need to support IE7. How can I eliminate this extra space?