CSS HTML 表格仅在外部显示边框

在本文中，我们将介绍如何使用CSS和HTML来设置表格仅在外部显示边框的效果。通常情况下，HTML表格的边框会同时出现在内部和外部，但是有时候我们只想在表格的外部显示边框，而内部则不显示边框。

阅读更多：CSS 教程

使用CSS的border属性

要实现表格仅在外部显示边框，我们可以使用CSS的border属性。border属性可以设置元素的边框样式、宽度和颜色。我们可以通过设置表格的边框样式为none，然后对表格的外部边框进行单独设定来达到目的。

下面是一个示例代码，展示了如何使用CSS来实现表格仅在外部显示边框的效果：

<style>
table {
  border-collapse: collapse;
}

table, th, td {
  border: none;
}

table.outer-border {
  border: 1px solid black;
}

table.outer-border th, table.outer-border td {
  border: 1px solid black;
}
</style>

<table class="outer-border">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

在上面的示例中，我们首先对整个表格设置了border-collapse属性，将表格中的边框合并成一个单一的边框。然后我们对表格、表头（th）和表格数据（td）都设置了border属性为none，这样表格的内部就没有了边框。

接下来，我们给表格添加了一个class名为”outer-border”，并对这个class进行了单独的样式设定。我们设置了这个class的边框为1px实线黑色，并同时对表头和表格数据也设置了相同的边框样式。这样，就实现了表格仅在外部显示边框的效果。

使用HTML的边框属性

除了使用CSS来实现表格仅在外部显示边框的效果外，我们也可以使用HTML的边框属性来达到相同的效果。HTML的边框属性用于设置表格的边框样式、宽度和颜色。

下面是一个示例代码，展示了如何使用HTML的边框属性来实现表格仅在外部显示边框的效果：

<table border="0" rules="groups" frame="box">
  <colgroup>
    <col />
    <col />
  </colgroup>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
    </tr>
  </tbody>
</table>

在上面的示例中，我们在

table>标签中添加了border属性并设置为0，这样可以取消表格的默认边框。然后我们使用rules属性设置为”groups”，frame属性设置为”box”，这样表格的外部边框就被单独设定为实线的边框。