添加表列分隔符而不扭曲列數據？

Question

是否有一種簡單的方法在HTML表格列之間創建垂直分隔符？我想添加粗棒，但我所見過的唯一好方法是扭曲表格數據添加TD。

有沒有辦法在只使用jQuery + CSS的表的列之間添加垂直分隔符？

我的表格結構非常簡單。

<table> 
<thead><tr><th>...</tr></thead> 
<tbody><tr>...</tr>...</tbody> 
</table> 

Answer 1

你正在尋找對於標籤的屬性，它被稱爲規則： http://www.htmlcodetutorial.com/tables/_TABLE_RULES.html

<table rules="cols"> 
    <thead><tr><th>...</tr></thead> 
    <tbody><tr>...</tr>...</tbody> 
</table> 

您可以使用CSS邊框屬性樣式。但是，在每個單元格上使用邊框的優點是，它不會在表格的右側（或實際上最後一個單元格）添加邊框，因此您不必爲最後一個單元格添加特殊的類別覆蓋邊界。

編輯：屬性邊界=「0」添加到該標籤，如果你不希望整個表格周圍的邊框（或者不是第一/最後一列的左/右）。

例：http://jsbin.com/ixire

Answer 2

通常在每個單元的右側（或左側）用邊框完成。

這 - >http://jsfiddle.net/XFtBR/應該給你一個出發點。

Answer 3

使用單元格邊框是可以使用一個選項，但還有另一種：

我不知道，如果你可以改變你的表結構，但如果可以的話，使用colgroup和col標籤表。我沒有在最新的FF，Chrome和Opera的快速測試，它在所有的工作：

<style type="text/css"> 
    table { 
     border:1px solid #ccc; 
     border-collapse:collapse; 
    } 

    .col { 
     border-right:10px solid blue; 
    } 

    </style> 

    <div id="tDiv"> 

    <table border="1"> 
    <colgroup class="col"> 
     <col width="200" /> 
    </colgroup> 
    <colgroup class="col"> 
     <col width="200" /> 
    </colgroup> 
    <thead> 
     <tr> 
      <th>one</th> 
      <th>two</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>one one</td> 
      <td>one two</td> 
     </tr> 
    </tbody> 
    </table> 
</div> 

我沒拿到，雖然在IE中改變測試（它的任何版本）。