CSS-стилизация HTML-столбцов таблицы с использованием <col />, каскадная справка

Question

Как мне оформить один столбец на моей таблице, чтобы не было границ?

Я использовал тег <col/> с идентификатором, чтобы я мог стилизовать его с помощью CSS. Пример моего CSS:

#table td, th {
    vertical-align:middle;
    text-align:center;
    font-size:11px;
    border:1px solid #E0E0E0;
}
#col {
    width:300px;
    border:none !important;
}

Вышеприведенное должно сделать так, чтобы каждая ячейка в #table имела границы, в то время как объявление! Важный должно перекрывать каскад выше. Что я тут не так делаю?

Я сделал ниже, сделав каждый <td id="col"> и изменив мой селектор col на td#col. Я чувствовал, что это грязный способ сделать что-то, я хотел лучше контролировать свою таблицу, не вставляя тег id в каждый столбец td.

Answer 1

См. http://www.w3.org/TR/CSS21/tables.html#columns

Вы не устанавливаете border-collapse свойство:

Различные свойства границ применяются к столбцам только в том случае, если для элемента table установлено значение «collapse».

Тогда, учитывая:

В этом случае границы, установленные для столбцов и групп столбцов, вводятся в алгоритм разрешения конфликтов, который выбирает стили границ для каждого края ячейки.

Границы с двух сторон колонны по-прежнему будут влиять:

Границы со стилем 'none' имеют самый низкий приоритет. Только если свойства границы всех элементов, встречающихся на этом ребре, равны «none», граница будет опущена (но учтите, что «none» является значением по умолчанию для стиля границы.)

Таким образом, вы в конечном итоге удалите только верхнюю и нижнюю границы затронутых ячеек.