带双边框的Html表格？ [英] Html table with double border?

问题描述

如何创建一个带有双边框的表格：1px的外边框和10px的内边框？

这个边框只在表格中需要，而不是在单元之间。

谢谢。

解决方案

标签会破坏你的语义，我会建议合并< table> 和< tbody> CSS：

HTML：

  < table id =cow> 
< tbody> 
< tr>< td> Foo< / td>< td> Bar< / td>< / tr> 
< tr>< td> Foo< / td>< td> Bar< / td>< / tr> 
< tr>< td> Foo< / td>< td> Bar< / td>< / tr> 
< / tbody> 
< / table> 
  

CSS：

  #cow {
 border：1px solid＃000; 
} 
 
 #cow tbody {
 display：block; 
 border：10px solid #ccc; 
} 
  

这里的工作示例。

替代方法是将表格封装在一个包含< div> 元素。然后，您将1像素边框应用于< div> ，将10像素边框应用于< table> 。这肯定会起作用，但将是一种较少的语义方法。另一个缺点是，< div> 宽度将默认为可用的最大宽度，导致比实际表格宽度更大的1像素边框（请参阅 example ）。

How can I create a table with double border: the outer border of 1 px and the inner border of 10px?

This border is only necessary on the table, not between cells.

Thank you.

解决方案

Without adding extra tags that would break your semantics, I would recommend combining <table> and <tbody> and style them with CSS:

HTML:

<table id="cow">
    <tbody>
        <tr><td>Foo</td><td>Bar</td></tr>
        <tr><td>Foo</td><td>Bar</td></tr>
        <tr><td>Foo</td><td>Bar</td></tr>
    </tbody>
</table>

CSS:

#cow {
    border: 1px solid #000;
}

#cow tbody {
    display: block;
    border: 10px solid #ccc;   
}

Working example here.

An alternative approach would be to wrap your table in a containing <div> element. You would then apply the 1 pixel border to the <div> and the 10 pixel border to the <table>. This will definitely work, but will be a less semantic approach. Another downside to this is that the <div> width will default to the maximum width available, resulting in a larger 1 pixel border than your actual table width (see example).

这篇关于带双边框的Html表格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！