如何创建具有双边框的HTML / CSS表格？

Question

如何创建带双边框的边框？

我尝试为<table>和<tbody>设置1px纯黑色边框，并在它们之间添加间距/填充，但它不起作用。该页面也在SharePoint上运行，默认情况下将border-collapse设置为collapse到所有表。

Answer 1

border-style CSS属性可以设置为double，但它至少需要3px边框宽度。常见错误是设置1px边框宽度，这不适用于创建双边框。

可行的示例：

table {
    border: 3px double black;
}

另一个更复杂的技巧是对<table>和<tbody>使用不同的样式。外表将使用1px solid black边框，而<tbody>将使用inset阴影而不是边框​​。

HTML：

<table>
    <tbody>
        <tr><td>That's a test!</td></tr>
    <tbody>
</table>

CSS：

table {
    border: 1px solid black;
    padding: 2px;
    border-collapse: separate;
}

tbody {
    border-spacing: 3px;
    box-shadow: inset 1px 1px 0 black, inset -1px -1px 0 black;
    border-collapse: separate;
}

请注意，有两个插入阴影：一个用于顶部/左侧，一个用于底部/右侧。

Answer 2

这可能对你有用

＆＃13;

＆＃13;

table {
    border: 1px solid #000;
}

table tbody {
    display: block;
    border: 1px solid red;   
}

＆＃13;

<table>
    <tbody>
        <tr><td>some text</td><td>some text</td></tr>
        <tr><td>some text</td><td>some text</td></tr>
        <tr><td>some text</td><td>some text</td></tr>
    </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以通过在<table>代码中添加<div>代码并将一些填充应用于<div>代码来完成此操作。我已添加以下代码段。

table{
  border:1px solid #000;
  width:100%;
  height:100%;
  }
div{
  border:1px solid green;
  padding:2px;
  }
    

<div>
  <table>
    <tr><td>one</td><td>two</td></tr>
  </table>
</div>

Answer 4

试试这个......

.tbl-bdr {
  width: 200px;
  height: 200px;
  background: #fff;
  position: relative;
  border: 1px solid blue;
  margin: 20px;
}
.tbl-bdr:after {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border: 1px solid green;
  z-index: -1;
}

<table class="tbl-bdr">

</table>