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

Question

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

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

513 9

css

9 ответов:

Comments

Ничего не найдено.

rossipedia · Accepted Answer · 2018-06-19 19:39:26

Изменить 2

у Эразма есть лучший однострочный ниже

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

Erasmus · Accepted Answer · 2014-04-01 05:51:20

Я знаю, это старый вопрос, но есть простой, одна линия решения, который последовательно работает для Chrome, Firefox и др., а также IE8 и выше (и, по большей части, работает на IE7 тоже-см. http://www.quirksmode.org/css/selectors/ Подробнее):
table td + td { border-left:2px solid red; }
Вывод примерно такой:
Col1 | Col2 | Col3
что делает эту работу является то, что вы определяете границу только на ячейки таблицы, которые являются рядом с другой ячейкой таблицы. Другими словами, вы применяете CSS ко всем ячейкам в строке, кроме первой.

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

DavidT · Accepted Answer · 2010-07-23 00:05:49

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

ScottS · Accepted Answer · 2010-07-23 00:14:12

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

установить класс на последнем td каждой строки и использовать это

если это заданное количество ячеек и только нацеливание на новые браузеры, то 3 ячейки в ширину могут использовать td + td + td

или лучше (с новыми браузерами) td:last-child

hollsk · Accepted Answer · 2010-07-23 00:16:22

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

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

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

wrongsort · Accepted Answer · 2015-02-10 22:18:45

я использовал это в таблице стилей для трех столбцов, разделенных вертикальными границами, и он работал нормально:
#column-left {
     border-left: 1px solid #dddddd;
}
#column-center {
     /*no border needed/*
}
#column-right {
     border-right: 1px solid #dddddd;
}
столбец слева получает границу справа, столбец справа получает границу слева, а средний столбец уже заботится о левом и правом.

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

Mohideen ibn Mohammed · Accepted Answer · 2015-05-13 18:12:25

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

SteveH · Accepted Answer · 2010-07-23 00:11:44

нет простого способа сделать это, кроме как сделать что-то вроде class="lastCell" на последнем td в каждом tr, а затем настроить css следующим образом:
#table td {
    border-right: 5px solid red
}

.lastCell {
    border-right: none;
}

Ken Lin · Accepted Answer · 2018-01-17 19:19:59

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