Should be:
border-collapse:collapse;
border-spacing:0;
题
I have tried all of the solutions that might possibly work from around the net and haven't been able to figure this one out.
Here is a page that demonstrates 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>
When I look at this in Chrome or IE10, it looks like I want it to...no space between the div border and the table border. But, if I change the IE Document mode to IE7, a space shows up all the way around the table.
We still have to support IE7. How do I make this space go away?
解决方案 2
Should be:
border-collapse:collapse;
border-spacing:0;
其他提示
Also you can use:
<div class="centered_text datagrid">
<table cellpadding="0" cellspacing="0">
</table>
<div>