CSS: только границы столбцов таблицы

Ответ 1

Не без сложных селекторов CSS и дополнительной разметки и т.п.

Возможно, что-то подобное (с использованием селекторов CSS):

table {
    border:none;
    border-collapse: collapse;
}

table td {
    border-left: 1px solid #000;
    border-right: 1px solid #000;
}

table td:first-child {
    border-left: none;
}

table td:last-child {
    border-right: none;
}

Edit

Чтобы прояснить комментарий @jeroen, все, что вам действительно нужно:

table { border: none; border-collapse: collapse; }
table td { border-left: 1px solid #000; }
table td:first-child { border-left: none; }

Ответ 2

Я знаю, что это старый вопрос, но существует простое однострочное решение, которое работает последовательно для Chrome, Firefox и т.д., а также IE8 и выше (и, по большей части, работает на IE7 тоже - см. http://www.quirksmode.org/css/selectors/ для деталей):

table td + td { border-left:2px solid red; }

Результат выглядит примерно так:

Col1 | Col2 | Col3

Что делает эта работа, так это то, что вы определяете границу только для ячеек таблицы, которые находятся рядом с другой ячейкой таблицы. Другими словами, вы применяете CSS ко всем ячейкам в строке, кроме первой.

Применяя левую границу ко второму к последнему ребенку, она дает вид линии "между" ячейками.

Ответ 3

Я могу упростить эту проблему, но td {border-right: 1px сплошной красный;} работать для настройки вашей таблицы?

Ответ 4

Границы на таблицах всегда немного шелушатся. Одна из возможностей заключалась бы в том, чтобы добавить декларацию border-right в каждую ячейку таблицы, за исключением тех, которые находятся в самом правом столбце. Если вы используете какой-либо табличный интервал, это не будет работать очень хорошо.

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

Другая возможность - экспериментировать с colgroup/col. Это имело довольно ужасную поддержку кросс-браузера в последний раз, когда я смотрел на него, но мог бы улучшиться с тех пор: http://www.webmasterworld.com/forum83/6826.htm

Ответ 5

Вам нужно установить border-right на td, а затем указать последние tds в строке, чтобы установить границу на none. Способы достижения цели:

• Задайте класс в последней td каждой строки и используйте
• Если это определенное количество ячеек и только нацеливание на более новые браузеры, тогда 3 ячейки в ширину могут использовать td + td + td
• Или лучше (с новыми браузерами) td:last-child

Ответ 6

Я использовал это в таблице стилей для трех столбцов, разделенных вертикальными границами, и работал нормально:

#column-left {
     border-left: 1px solid #dddddd;
}
#column-center {
     /*no border needed/*
}
#column-right {
     border-right: 1px solid #dddddd;
}

Столбец слева получает границу справа, столбец справа получает границу слева, а средний столбец уже позабочен левым и правым.

Если ваши столбцы находятся внутри div/wrapper/table/etc..., не забудьте добавить дополнительное пространство для размещения ширины границ.

Ответ 7

Внутри <td> используйте style="border-left:1px solid #colour;"

Ответ 8

Там нет простого способа сделать это, кроме как делать что-то вроде class= "lastCell" на последнем td в каждом tr, а затем установить ваш css следующим образом:

#table td {
    border-right: 5px solid red
}

.lastCell {
    border-right: none;
}