Menu
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?
367
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With