Question

我已经尝试了所有可能在网络上工作的解决方案，并且无法解决这个问题。

这是一个演示此问题的页面：

<!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>

当我在Chrome或IE10中查看此内容时，看起来我想要它... div边框和表格边框之间没有空格。但是，如果我将IE文档模式更改为IE7，则会在表格周围显示一个空格。

我们仍然需要支持IE7。如何让这个空间消失？

Answer 1

您也可以使用：

<div class="centered_text datagrid">
            <table cellpadding="0" cellspacing="0">
            </table>
    <div>

Answer 2

应该是：

border-collapse:collapse;
border-spacing:0;

IE7中的额外空间，div中有一个表

2 个答案: