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

您要搜索的是标记的属性,它被称为规则: http://www.htmlcodetutorial.com/tables/_TABLE_RULES.html

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

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

编辑: 如果不希望整个表周围有边框(或不希望第一列/最后一列的左/右边框),请将属性border=“0”添加到标记中。

例子: http://jsbin.com/ixire

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

我不确定您是否可以更改您的表结构,但如果可以,请使用 colgroup 和表格的列标记。我在最新的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(它的任何版本)中进行测试。

通常在每个单元格的右侧(或左侧)使用边框。

这个& gt; http://jsfiddle.net/XFtBR/ 应该给你一个起点。