Question

如何制作一个在桌子周围有双边框但在单元格周围有单个实线边框的桌子？

table {
  border-collapse: collapse;
  border: 2px double black;
}

td {
  border: 1px solid black;
  margin: 0;
  padding: 5px;
}

th {
  background-color: #999;
  padding: 0;
  margin: 0;
}

tr {
  padding: 0;
}

<h1>Section 1</h1>
<h2>1.1 Subheading</h2>
<table>
  <tr>
    <th>A</th>
    <th>B</th>
    <th>C</th>
  </tr>
  <tr>
    <td>This is my content for box 1</td>
    <td>Some other content</td>
    <td>Here is my wonderful html table with long content that I have no idea how it will look until I see it</td>
  </tr>
  <tr>
    <td>twinkle twinkle</td>
    <td>little star</td>
    <td>Yao Ming</td>
  </tr>

</table>

单元格始终被单个边框覆盖（正确地如此）。我可以添加2个类，.row_start和.row_end，并为它们专门标注边框，这样它们的末端将加倍，然后在其他三个上加一个（同样对顶部的单元格也这样做）和底部单元格）。但是我想知道是否有更好的方法可以一起完成所有操作。

仅使用原始的HTML / CSS，我正在编写带有大量表的Word文档。我对Word对象模型没有成功，所以决定使用HTML创建它。

Answer 1

如果您想使用双边框，可以尝试一下，

HTML

<table class="borders">....</table>

CSS

 .borders {
  position: relative;
  border: 1px solid black;
}
  .borders:before {
  content: " ";
  position: absolute;
  z-index: -1;
  top: 1px;
  left: 1px;
  right: 1px;
  bottom: 1px;
  border: 1px solid black;
}

Answer 2

您可以通过将table包裹在div元素中并将边框设置为div元素来做到这一点。您必须使其显示：inline-block和width：auto，这样它就不会占据整个宽度并仅在桌子周围浮动。

table {
  border-collapse: collapse;
  border: 2px double black;
}

td {
  border: 1px solid black;
  margin: 0;
  padding: 5px;
}

th {
  background-color: #999;
  padding: 0;
  margin: 0;
}

tr {
  padding: 0;
}

.table-wrapper {
    display: inline-block;
    width: auto;
    padding: 5px; 
    border: 1px solid black;
}

<h1>Section 1</h1>
<h2>1.1 Subheading</h2>
<div class="table-wrapper">
  <table>
    <tr>
      <th>A</th>
      <th>B</th>
      <th>C</th>
    </tr>
    <tr>
      <td>This is my content for box 1</td>
      <td>Some other content</td>
      <td>Here is my wonderful html table with long content that I have no idea how it will look until I see it</td>
    </tr>
    <tr>
      <td>twinkle twinkle</td>
      <td>little star</td>
      <td>Yao Ming</td>
    </tr>

  </table>
</div>

Answer 3

您可以考虑概述：

table {
  border-collapse: collapse;
  border: 2px double black;
  outline:2px solid red;
}

td {
  border: 1px solid black;
  margin: 0;
  padding: 5px;
}

th {
  background-color: #999;
  padding: 0;
  margin: 0;
}

tr {
  padding: 0;
}

<h1>Section 1</h1>
<h2>1.1 Subheading</h2>
<table>
  <tr>
    <th>A</th>
    <th>B</th>
    <th>C</th>
  </tr>
  <tr>
    <td>This is my content for box 1</td>
    <td>Some other content</td>
    <td>Here is my wonderful html table with long content that I have no idea how it will look until I see it</td>
  </tr>
  <tr>
    <td>twinkle twinkle</td>
    <td>little star</td>
    <td>Yao Ming</td>
  </tr>

</table>

或box-shadow：

table {
  border-collapse: collapse;
  border: 2px double black;
  box-shadow:0 0 0 2px red;
}

td {
  border: 1px solid black;
  margin: 0;
  padding: 5px;
}

th {
  background-color: #999;
  padding: 0;
  margin: 0;
}

tr {
  padding: 0;
}

<h1>Section 1</h1>
<h2>1.1 Subheading</h2>
<table>
  <tr>
    <th>A</th>
    <th>B</th>
    <th>C</th>
  </tr>
  <tr>
    <td>This is my content for box 1</td>
    <td>Some other content</td>
    <td>Here is my wonderful html table with long content that I have no idea how it will look until I see it</td>
  </tr>
  <tr>
    <td>twinkle twinkle</td>
    <td>little star</td>
    <td>Yao Ming</td>
  </tr>

</table>

还要考虑使用outline-offset在两个边界之间建立距离

table {
  border-collapse: collapse;
  border: 2px double black;
  outline:2px solid red;
  outline-offset:2px;
}

td {
  border: 1px solid black;
  margin: 0;
  padding: 5px;
}

th {
  background-color: #999;
  padding: 0;
  margin: 0;
}

tr {
  padding: 0;
}

<h1>Section 1</h1>
<h2>1.1 Subheading</h2>
<table>
  <tr>
    <th>A</th>
    <th>B</th>
    <th>C</th>
  </tr>
  <tr>
    <td>This is my content for box 1</td>
    <td>Some other content</td>
    <td>Here is my wonderful html table with long content that I have no idea how it will look until I see it</td>
  </tr>
  <tr>
    <td>twinkle twinkle</td>
    <td>little star</td>
    <td>Yao Ming</td>
  </tr>

</table>

对html表使用双边框，而单元格周围只有一个实线边框

3 个答案: