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边框属性设置样式。但是在每个单元格上使用边框的优点是它不会在表格的右侧（或实际的最后一个单元格）添加边框，因此您不必在最后一个单元格中添加特殊类别覆盖边界。

编辑：如果您不想在整个表格周围放置边框（或者不是第一列/最后一列的左/右），请将属性border =“0”添加到标记。< / p>

示例：http://jsbin.com/ixire

Answer 2

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

我不确定您是否可以更改表格结构，但如果可以，请使用表格的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（任何版本的版本）中进行测试。

Answer 3

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

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

添加表列分隔线而不会扭曲列数据？

3 个答案: