html - Magic table 不受 CSS 影响，这是什么魔法？

Question

我有一个 super 简单的 HTML 表格:

        <table class="dispdtab">
            <tr>
                <td><b>Dealer: </b></td>
                <td>dealername</td>
            </tr>
            <tr>
                <td><b>Address: </b></td>
                <td>123 main srr</td>
            </tr>
            <tr>
                <td><b>Contact: </b></td>
                <td>Bob Dole</td>
            </tr>
        </table>

我只是想将愚蠢的 table 居中，但它没有。我不断尝试，但 table 却一直 mock 我，指指点点并 mock 我的失败。

这是我尝试过的一些 CSS:

.dispdtab {
    margin:0 auto;
    text-transform:uppercase;
    font-size:.8em;
}
.dispdtab td{
    padding:0 .25em;
}

我尝试添加 tbody在类名之后。我尝试添加 display:block;我要回到老派，做这些坏男孩之一<center>...</center>

值得注意的是，当我添加border:1px solid black;时只有第一行受到边框影响。

我做错了什么？

Answer 1

如果您查看下面的代码，您会发现表格实际上居中，但我必须为 float div 指定一个宽度才能实现这一点。如果您检查代码并删除 div 上的 width 声明，则其宽度默认为表格的计算宽度，并且 table< 不再明显 居中。

在网页设计中，始终值得注意为对象指定尺寸。我们被告知我们的设计应该尽可能流畅，但有时以像素为单位指定宽度/高度并不可耻。诀窍在于知道何时需要这样做。

http://jsbin.com/oJuxoQU/1/edit