Question

我有一张这样的表：

    <table>
        <caption>Caption:</caption>
        <thead>
            <tr>
                <td style="width: 65%;">A</td>

                <td class="center" style="width: 5%;">B</td>
                <td style="width: 15%;">C</td>
                <td style="width: 15%;">D</td>
            </tr>
        </thead>
        <tbody>
            <tr>

                <td >aaa</td>
                <td>bbb</td>
                <td>ccc</td>
                <td>ddd</td>
            </tr>
        </tbody>
    </table>

使用这样的样式：

table {
    width: 100%;
    margin-top: 1em;
    border-collapse: collapse;
    border: 1px solid #111;
}
table th, table td {
    vertical-align: middle;
}
table td {
    border: 1px solid #888;
    padding: .2em .4em;
}

我试图实现的是在桌子周围设置一个边框，边框的颜色与桌子内边框的颜色不同。

我希望外边框比内边框（＃888）更暗（＃222）。

Answer 1

为了演示的目的，我在你的桌子上增加了一条线......

<table>
    <caption>Caption:</caption>
    <thead>
        <tr>
            <th style="width: 65%;" class="first">A</th>
            <th class="center" style="width: 5%;">B</th>
            <th style="width: 15%;">C</th>
            <th style="width: 15%;" class="last">D</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="first">aaa</td>
            <td>bbb</td>
            <td>ccc</td>
            <td class="last">ddd</td>
        </tr>
        <tr class="final">
            <td class="first">aaa</td>
            <td>bbb</td>
            <td>ccc</td>
            <td class="last">ddd</td>
        </tr>
    </tbody>
</table>

这是CSS。

table {
    width: 100%;
    margin-top: 1em;
    border-collapse: collapse;
}

th, td {
    vertical-align: middle;
    border: 1px solid #888;
    padding: .2em .4em;
}

table > thead > tr > th {
    border-top: 1px solid #111;
}

tr.final > td {
    border-bottom: 1px solid #111;
}

.first {
    border-left: 1px solid #111;
}

.last {
    border-right: 1px solid #111;
}

添加jsfiddle link以预览代码

Answer 2

我试图实现的是在桌子周围设置边框   与桌子内边框不同的颜色。

我希望外边框比内边框更暗（＃222）   （＃888）。

对于1px实体边框，比原始边框更简单的解决方案是：

table { border: 1px solid #222; border-collapse: collapse; }
td    { border: 1px inset #888;  }

对于大于1px的边框宽度，并保持＆＃34;实体＆＃34;边框样式，设置表格边框宽度至少比td边框宽度1px geater，例如：

table { border: 3px solid #222; border-collapse: collapse; }
td    { border: 2px solid #888;  }

这适用于Firefox和Chrome（至少自2011年以来的版本）。

然而，IE8有不一致性：使用深色外部/浅色内边框颜色，内部边框最终形成外部/内部颜色的深色泥泞混合。但是，由于外部/黑暗的内部边界很浅，IE8似乎工作正常。

无论如何，一个很好的实验表样式的工具是 HTML and CSS Table Border Style Wizard

Answer 3

td＆amp;桌面边框会在外面折叠。我只想在表格周围添加一个div并添加＃222边框。

编辑：是的，这意味着将标题移到表格标签之外，或者在表格中添加负边距顶部。

Answer 4

修正后没有任何额外的课程。

支持：ie8 +因为：last-child选择器 http://jsfiddle.net/nyu7n/87/

table {
    width: 80%;
    margin: 2em auto;
    border: 1px solid blue;
}
td {
   border-bottom: 1px solid red;
    border-left: 1px solid red;
    padding: .2em .4em;
}
td:first-child {
    border-left: none;
}
tr:last-child td {
    border-bottom: none;
}

表格边框之外的CSS不同于表格单元格之间的内部边界

4 个答案: