Добавление разделителей столбцов таблицы без искажения данных столбцов?

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" в тег, если вы не хотите, чтобы граница была вокруг всей таблицы (или не слева / справа от первого/ последний столбец).

ПРИМЕР: 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

Обычно делается с рамкой справа (или слева) от каждой ячейки.

Это -> http://jsfiddle.net/XFtBR/ должно дать вам начальную точку.