Extra space in IE7 with a table inside a div

StackOverflow https://stackoverflow.com/questions/18750594

  •  28-06-2022
  •  | 
  •  

Вопрос

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>
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top