CSS: границы только между столбцами таблицы

Question

Есть ли способ, с помощью CSS, показать границы в таблице только между столбцами (не по внешним краям)?

Answer 1

Редактировать 2

Erasmus имеет лучшую однострочность ниже

---

Не без хитрых селекторов 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;
}

Редактировать

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

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

Answer 2

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

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

Вывод выглядит примерно так:

Col1 | Col2 | Col3

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

Применяя левую границу ко второму, последнему по последнему дочернему элементу, создается вид линии, находящейся «между» клетками.

Answer 3

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

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

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

Answer 4

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

Answer 5

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

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

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

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

Answer 6

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

1. Установите класс в последнем td каждой строки и используйте это
2. Если это заданное количество ячеек и предназначено только для новых браузеров, то 3 ячейкиширокий можно использовать td + td + td
3. или лучше (с новыми браузерами) td:last-child

Answer 7

Возможно, я упрощаю проблему, но работает ли td {border-right: 1px solid red;} для настройки вашей таблицы?

Answer 8

См. Атрибут rules таблицы - https://www.w3.org/TR/html401/struct/tables.html#h-11.3.1

Answer 9

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

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

.lastCell {
    border-right: none;
}