Drawing a box around a table and its associated caption

Question

Drawing a box around a table and its associated caption

6k views Asked by Brian Diggs At 24 November 2024 at 18:18

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?

Original Q&A

There are 4 answers

Magicprog.fr On 29 June 2015 at 15:20

Just create 3 borders on each element:

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/

maioman On 02 July 2015 at 00:05

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.

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.

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.

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>

Raj Rana On 03 July 2015 at 11:13

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>

**Brian Diggs** · Accepted Answer · 2015-06-25 18:21:35

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>

TechQA.

Drawing a box around a table and its associated caption

There are 4 answers

Why:

Solution:

Related Questions in HTML

Related Questions in CSS

Related Questions in HTML-TABLE

Related Questions in CAPTION

Popular Questions

Popular Tags

Trending Questions