CSS外表格邊框

Question

我有這樣的一個表：

<table> 
     <caption>Caption:</caption> 
     <thead> 
      <tr> 
       <td style="width: 65%;">A</td> 

       <td class="center" style="width: 5%;">B</td> 
       <td style="width: 15%;">C</td> 
       <td style="width: 15%;">D</td> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 

       <td >aaa</td> 
       <td>bbb</td> 
       <td>ccc</td> 
       <td>ddd</td> 
      </tr> 
     </tbody> 
    </table> 

使用樣式是這樣的：

table { 
    width: 100%; 
    margin-top: 1em; 
    border-collapse: collapse; 
    border: 1px solid #111; 
} 
table th, table td { 
    vertical-align: middle; 
} 
table td { 
    border: 1px solid #888; 
    padding: .2em .4em; 
} 

我所試圖實現的是在表格周圍有一個不同於表格邊框的邊框。

我希望外邊框比內邊框（＃888）更暗（＃222）。

Answer 1

我添加一個額外的行到您的表，這個演示的目的...

<table> 
    <caption>Caption:</caption> 
    <thead> 
     <tr> 
      <th style="width: 65%;" class="first">A</th> 
      <th class="center" style="width: 5%;">B</th> 
      <th style="width: 15%;">C</th> 
      <th style="width: 15%;" class="last">D</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td class="first">aaa</td> 
      <td>bbb</td> 
      <td>ccc</td> 
      <td class="last">ddd</td> 
     </tr> 
     <tr class="final"> 
      <td class="first">aaa</td> 
      <td>bbb</td> 
      <td>ccc</td> 
      <td class="last">ddd</td> 
     </tr> 
    </tbody> 
</table> 

這裏是CSS。

table { 
    width: 100%; 
    margin-top: 1em; 
    border-collapse: collapse; 
} 

th, td { 
    vertical-align: middle; 
    border: 1px solid #888; 
    padding: .2em .4em; 
} 

table > thead > tr > th { 
    border-top: 1px solid #111; 
} 

tr.final > td { 
    border-bottom: 1px solid #111; 
} 

.first { 
    border-left: 1px solid #111; 
} 

.last { 
    border-right: 1px solid #111; 
} 

新增jsfiddle link用於預覽代碼

Answer 2

td &表格邊界將在外面崩潰。我只是在表格周圍添加一個div，並在其中添加＃222邊框。

編輯：是的，這意味着將標題移動到表格標籤之外，或者向表格添加負邊距。

Answer 3

我所想實現的是具有圍繞 不同的顏色比在表內邊框的表格邊框。

我希望外邊框比內邊框 （＃888）更暗（＃222）。

我意識到這是一個老問題，但比原來簡單的解決方法是：

table { border: 1px solid #222; border-collapse: collapse; } 
td { border: 1px inset #888; } 

這在Firefox和Chrome的工作以及（對於版本自2011年以來至少） 。但是，IE8具有不一致性：使用深色外部/淺色內邊框顏色，內部邊框最終會形成外部/內部顏色的深色混合。但是，IE8的外部/內部邊界很淺，似乎可以正常工作。

在anycase，用表格樣式嘗試一個偉大的工具是
HTML and CSS Table Border Style Wizard

Answer 4

沒有任何額外的類固定。

支持：由於IE8 +：最後一子選擇 http://jsfiddle.net/nyu7n/87/

table { 
    width: 80%; 
    margin: 2em auto; 
    border: 1px solid blue; 
} 
td { 
    border-bottom: 1px solid red; 
    border-left: 1px solid red; 
    padding: .2em .4em; 
} 
td:first-child { 
    border-left: none; 
} 
tr:last-child td { 
    border-bottom: none; 
}