Javascript 在不扭曲列数据的情况下添加表列分隔符？

有没有一种简单的方法可以在HTML表格列之间创建垂直分隔符？我想添加粗条，但我看到的唯一好方法是扭曲表数据并添加TD

有没有办法只使用jQuery+CSS在表的列之间添加垂直分隔符

我的桌子结构很简单

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

...
......

通常在每个单元格的右侧（或左侧）添加边框

---

此->应该为您提供一个起点。

使用单元格边框是一个可以使用的选项，但还有另一个选项：

我不确定是否可以更改表结构，但如果可以，请为表使用和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>

桌子{
边框：1px实心#ccc；
边界塌陷：塌陷；
}
上校{
右边框：10px纯蓝色；
}
一
二
11
12

---

不过，我没有在IE（它的任何版本）中得到测试更改。

您搜索的是标记的属性，它被称为规则：

...
......

您可以使用css边框属性设置其样式。但是在每个单元格上使用边框的优势在于，它不会在表的右侧（或者实际上是最后一个单元格）添加边框，因此不必向最后一个单元格添加特殊类来覆盖边框

编辑：如果不希望在整个表（或不是第一列/最后一列的左/右）周围有边框，请将属性border=“0”添加到标记中

---

示例：

td{border right:3px solid black}我尝试了td borders，但单元格填充使垂直线断开。看起来colgroup+规则可能就是我要找的。我将测试所有这些。有没有办法修改“规则”生成的边框样式？您可以对colgroup进行样式设置以影响规则。HTML5不支持此属性，请参阅我刚刚在ie6中测试了它，没有运气：（，如果添加HTML5可能会起作用。jsI不需要支持ie6:）。客户接受被迫使用IE7+。这并不完全有效，但它符合以下规则。

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