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

我有一个HTML表格，它有一个相关的标题。我想把它们合在一起画一个框(一个框围绕表格部分和标题)，

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?

我知道我可以用DIV包装整个表，并对其进行样式化，但是我正在使用另一个程序以编程方式生成HTML(使用pandoc从markdown生成HTML)，因此我无法控制它。是否有办法使示例中的黑框同时出现在表部分和标题中?

4 个解决方案

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

如果将表的显示属性设置为inline-block，则表的边框将包围表的部分和标题。

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>

#2

Why:

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.

在可视格式化模型方面，表可以表现为块级(用于显示:表)或inline-level(用于显示:inline-table)元素。

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.[...]

在这两种情况下，表都会生成一个名为“表包装器”的主体块框，其中包含表框本身和任何标题框(按文档顺序)。表框是一个块级的框，它包含表的内部表框。标题框是块级的框，它们保留自己的内容、填充、空白和边框区域，并作为普通的块框呈现在表包装框中。标题框是放在表格框之前还是之后，由“标题栏”属性决定，如下所述。

That said caption is a well defined element that's not inside the table element (because the actual parent element is the table-wrapper-box) ;
the border property defined for table is applied only to the table-box.

该标题是一个定义良好的元素，不在table元素中(因为实际的父元素是table-wrapper-box);为表定义的边框属性只应用于表框。

Solution:

Wanting to maintain the caption-side functionality a good option is creating a wrapper, in this way you can also use default display:table.

要维护标题端功能，一个好的选项是创建一个包装器，这样您也可以使用默认的display:table。

A smooth way to do this without using additional markup is with pseudo-elements;

使用伪元素是一种不使用附加标记的平滑方法;

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>

#3

Just create 3 borders on each element:

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

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

#4

Yes You can use inline-block style and for your reqiurement i tried the outline style that also works good and thanks

是的，你可以使用行内块样式，为了满足你的需求，我试过了大纲样式，它也很好，谢谢

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>

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

如果将表的显示属性设置为inline-block，则表的边框将包围表的部分和标题。

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>

#2

Why:

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.

在可视格式化模型方面，表可以表现为块级(用于显示:表)或inline-level(用于显示:inline-table)元素。

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.[...]

在这两种情况下，表都会生成一个名为“表包装器”的主体块框，其中包含表框本身和任何标题框(按文档顺序)。表框是一个块级的框，它包含表的内部表框。标题框是块级的框，它们保留自己的内容、填充、空白和边框区域，并作为普通的块框呈现在表包装框中。标题框是放在表格框之前还是之后，由“标题栏”属性决定，如下所述。

该标题是一个定义良好的元素，不在table元素中(因为实际的父元素是table-wrapper-box);为表定义的边框属性只应用于表框。

Solution:

Wanting to maintain the caption-side functionality a good option is creating a wrapper, in this way you can also use default display:table.

要维护标题端功能，一个好的选项是创建一个包装器，这样您也可以使用默认的display:table。

A smooth way to do this without using additional markup is with pseudo-elements;

使用伪元素是一种不使用附加标记的平滑方法;

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>

#3

Just create 3 borders on each element:

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

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

#4

Yes You can use inline-block style and for your reqiurement i tried the outline style that also works good and thanks

是的，你可以使用行内块样式，为了满足你的需求，我试过了大纲样式，它也很好，谢谢

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>

秒客网

在一个表及其相关的标题周围画一个框。

4 个解决方案

#1

#2

Why:

Solution:

#3

#4

#1

#2

Why:

Solution:

#3

#4

相关文章