Question

如何创建具有双边框的表：1 px的外边框和10px的内边框？

此边框仅在桌面上有效，而不是在单元格之间。

谢谢。

Answer 1

如果不添加会破坏语义的额外标签，我建议合并<table>和<tbody>并使用CSS设置样式：

<强> HTML：

<table id="cow">
    <tbody>
        <tr><td>Foo</td><td>Bar</td></tr>
        <tr><td>Foo</td><td>Bar</td></tr>
        <tr><td>Foo</td><td>Bar</td></tr>
    </tbody>
</table>

<强> CSS：

#cow {
    border: 1px solid #000;
}

#cow tbody {
    display: block;
    border: 10px solid #ccc;   
}

Working example here.

替代方法将您的表包装在包含<div>元素中。然后，您将1像素边框应用于<div>，将10像素边框应用于<table>。这肯定会起作用，但将是一种不太语义的方法。另一个缺点是<div>宽度将默认为可用的最大宽度，导致比实际表宽度更大的1像素边框（请参阅example）。

Answer 2

你可以将表格放在 div 标签中，然后给div标签1px边框和内表10 px边框。

Answer 3

border-style：double; border-width：thin;

带双边框的Html表？

3 个答案: