在 table 及其相关标题周围画一个框

Question

我在 HTML 中有一个 table，它有一个关联的标题。我想围绕这些共同绘制一个框（表格部分和标题周围的单个框），

caption {
  border: 2px solid #eeeeee;
}
table {
  border: 4px solid black;
}

<html>
<table>
  <caption>Table caption</caption>
  <thead>
    <tr>
      <td>Alpha</td>
      <td>Beta</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
  </tbody>
</table>  
</html>

我知道我可以将整个 table 包装在 DIV 中并设置样式，但我正在使用另一个程序以编程方式生成 HTML（HTML 来自markdown 使用 pandoc）所以我无法控制它。有什么方法可以使示例中的黑框同时出现在 table 部分和标题周围吗？

Answer 1

如果将table的display 属性设置为inline-block，那么table的边框将包围表格部分和标题。

caption {
  border: 2px solid #eeeeee;
}
table {
  border: 4px solid black;
  display: inline-block;
}

<html>
<table>
  <caption>Table caption</caption>
  <thead>
    <tr>
      <td>Alpha</td>
      <td>Beta</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
  </tbody>
</table>  
</html>

Answer 2

只需在每个元素上创建 3 个边框：

caption {
  border-left: 4px solid black;
  border-right: 4px solid black;
  border-top: 4px solid black;
}
table {
  border-left: 4px solid black;
  border-right: 4px solid black;
  border-bottom: 4px solid black;
}

JsFiddle: http://jsfiddle.net/ghorg12110/frffLe7q/

Answer 3

为什么：

From the description of table model:

In terms of the visual formatting model, a table can behave like a block-level (for display: table) or inline-level (for display: inline-table) element.

In both cases, the table generates a principal block box called the table wrapper box that contains the table box itself and any caption boxes (in document order). The table box is a block-level box that contains the table's internal table boxes. The caption boxes are block-level boxes that retain their own content, padding, margin, and border areas, and are rendered as normal block boxes inside the table wrapper box. Whether the caption boxes are placed before or after the table box is decided by the 'caption-side' property, as described below.[...]

也就是说 caption 是一个定义明确的元素，它不在 table 元素内（因为实际的父元素是 table-wrapper-box）；
为 table 定义的 border 属性仅应用于 table-box。

解决方案：

想要保持 caption-side 功能，一个不错的选择是创建包装器，这样您也可以使用默认 display:table.

在不使用额外标记的情况下，一种平滑的方法是使用伪元素；

caption {
   border: 2px solid #eeeeee;
   /*caption-side:bottom;*/
}
table {
   /* border: 4px solid black;*/
   position: relative;
   padding: 3px;
   
}
table:before {
   display: block;
   content:'';
   position: absolute;
   bottom: 0;
   left: 0;
   right:0;
   top:-4px;
   border: 4px solid black;
   
}

<html>
<table>
<caption>Table caption</caption>
<thead>
    <tr>
        <td>Alpha</td>
        <td>Beta</td>
    </tr>
</thead>
<tbody>
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
</tbody>
</table>
</html>

Answer 4

是的，您可以使用内联块样式，根据您的要求，我尝试了大纲样式，效果也不错，谢谢

caption {
   border: 2px solid #eeeeee;
  
}
table {
    outline: 1px solid;
   
   
}

<html>
<table>
<caption>Table caption</caption>
<thead>
    <tr>
        <td>Alpha</td>
        <td>Beta</td>
    </tr>
</thead>
<tbody>
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
</tbody>
</table>
</html>

在 table 及其相关标题周围画一个框

Drawing a box around a table and its associated caption

html

css

html-table

caption

为什么：

解决方案：