Border для колонки таблицы, как сделать?

Question

[nvdfxx]

Есть таблица с border-collapse: separate, нужно для одной колонки задать бордер, как это сделать с обычным цветом - не проблема, у меня используется

border-image: linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%); 
border-image-slice: 1;

Какие варианты решения есть?

Answer 1

[Ankhena]

Поменять separate на collapse и внутренние отступы у ячеек

col:nth-child(2) {
  background: linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%) no-repeat top left / 2px 100%, linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%) no-repeat top right / 2px 100%,
linear-gradient(to left, #3acfd5, #3acfd5) no-repeat top / 100% 2px;
}

Comments

[nvdfxx]

так не работает градиент у бордера и мне нужен отступ между колонками, так что от separate отказаться не могу

[Ankhena]

nvdfxx, вашу таблицу в песочницу jsfiddle.net или codepen.io
Картинку сюда.
И почему не можете отказаться от separate, если это не будет очевидно по макету.

[nvdfxx]

https://codepen.io/nvdfxx/pen/pqwezQ

spoiler

[Ankhena]

nvdfxx,
варианты вижу такие:
1. дополнительные столбцы и rowspan, вертикальные границы задавать этим доп.столбцам.

2. переверстать на div

3. псевдоэлементом к первой ячейке столбца
https://codepen.io/anon/pen/GPEWrO
но придется либо задавать размеры колонкам (фикс или в %), чтобы задать ее для left (для следующих столбцов еще и calc) и ширину либо узнавать их на js. Судя по макету, вероятнее, что на js.

[nvdfxx]

не очень эстетично варианты конечно выглядят в плане красоты css, но спасибо

[Ankhena]

nvdfxx, сама бы хотела что-нибудь более гармоничное, но не придумала (((

[Ankhena]

nvdfxx, а не, придумала ))
Сейчас покажу

[Ankhena]

nvdfxx,

col:nth-child(2) {
  background: linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%) no-repeat top left / 2px 100%, linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%) no-repeat top right / 2px 100%,
linear-gradient(to left, #3acfd5, #3acfd5) no-repeat top / 100% 2px;

}

https://codepen.io/anon/pen/rowyRe
только не понятное творится с нижней границей, пришлось ее задать для ячейки

[nvdfxx]

круть, спасибо

[Сергей delphinpro]

nvdfxx, Мне интересно, как вы адаптируете такие вещи под мобильники? Когда верстаете их таблицами.

Я-то всегда дивами делаю, на мобилах легко сворачиваю в столбик или в карусель..