在表格及其相关标题周围绘制一个框

Question

在表格及其相关标题周围绘制一个框

我有一个HTML表格,它有一个相关的标题.我想在这些集体周围画一个方框(表格部分和标题周围的一个方框),

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

我知道我可以用DIV和样式包装整个表格,但我正在使用另一个程序以编程方式生成HTML(使用pandoc从markdown中生成HTML)所以我无法控制它.是否有任何方法可以使示例中的黑匣子围绕表格部分和标题？

Answer 1

Bri*_*ggs 5

如果display将表的属性设置为,则表inline-block的边框将包围表格部分和标题.

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	10 年，4 月前
查看次数：	3254 次
最近记录：	10 年，3 月前