为什么：

Question

I have a table in HTML which has an associated caption. I want to draw a box around these collectively (a single box around the tabular part and the caption),

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>

I know I could wrap the whole table in a DIV and style that, but I am using another program to generate the HTML programmatically (HTML from markdown using pandoc) so I can't control this. Is there any way to make the black box in the example go all around both the table part and the caption?

Answer 1

If you set the display property of the table to inline-block, then the border of the table will surround both the tabular part and the caption.

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

为什么：

From the description of table model：

就可视化格式模型而言，表可以表现为块级（对于display: table）或内联级（对于display: inline-table）元素。

在这两种情况下，该表都会生成一个称为表格包装盒的主要块框，其中包含表格框本身和任何标题框（按文档顺序）。表格框是一个块级别的框，其中包含表格的内部表格框。 标题框是块级框，它们保留自己的内容，填充，边距和边框区域，并在表格包装框内呈现为普通的块框。标题框是放在之前还是表格框由'caption-side'属性决定之后，如下所述。[...]

那说caption是一个定义明确的元素，它不在table元素中（因为实际的父元素是table-wrapper-box）;
为border定义的table属性仅应用于表格框。

解决方案：

想要保持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 3

只需在每个元素上创建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 4

是的你可以使用内联块样式，为了你的需求，我尝试了也很好用的大纲样式，谢谢

＆＃13;

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

＆＃13;

<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>

＆＃13;

Drawing a box around a table and its associated caption

4 个答案:

为什么：

解决方案：