2011-05-10 111 views
1

如何創建一個帶有雙邊框的表格:1px的外邊框和10px的內邊框?帶雙邊框的Html表格?

此邊框僅在表格中需要,而不是在單元格之間。

謝謝。

回答

8

無需添加會破壞你的語義額外的標籤,我會建議結合<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; 
} 

Working example here.

一個替代方法將包裝您的表在包含<div>元素。然後,您將應用1像素邊框到<div>和10像素邊框到<table>。這肯定會起作用,但將是一種較少的語義方法。另一個缺點是,<div>寬度將默認爲可用的最大寬度,導致比實際表格寬度更大的1像素邊框(請參閱example)。

0

你可以在div標籤中取表格,然後給div標籤1px邊框和內表10px邊框。

0

border-style:double; border-width:thin;