Как объединить ячейки строки таблицы в один элемент для применения им свойства css?

Question

[im_dimas]

Добрый вечер. Суть вопроса изъяснил в заголовке.

Есть таблица:

<table>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td>
</tr>
</table>

Мне нужно объединить некоторые td, для того, чтобы применить тени, например вот так:

<table>
<tr>
<div><td>1</td><td>2</td></div><td>3</td><td>4</td>
</tr>
</table>

Но, так не получается. Применить тени отдельно каждой ячейки тоже не вариант, так как тени накладываются на предыдущую ячейку, z-index не спасает. Куда копать?

Comments

[Шохрух Шаймардонов]

Чем вас не устроил сам tr? Он как бы и есть родитель для td и является строкой

[im_dimas]

Шохрух Шаймардонов, тем, что мне нужно применить тень, только к отдельным ячейкам

[Сергей delphinpro]

С таблицей решения нет.

Пилите на дивах, если это возможно.

Или подкладывайте фейковый элемент под таблицу, под нужными ячейками. Тут, понятно, нужен js - считать положение элементов на странице, отслеживать скролл и ресайз для корректировки.

[im_dimas]

Сергей delphinpro, как раз на дивах невозможно. сортировка, все дела, сама верстка сложная

[Ankhena]

im_dimas, из того, что можно: https://jsfiddle.net/Ankhena/ft7bsdag/

Answer 1

[ⓒⓢⓢ]

не совсем понятно сколько и как ячейки должны объединяться, но как для примера, можете растянуть псевдоэлемент с тенью и\или комбинировать другие эффекты, какие уже вам нужны.
https://codepen.io/anon/pen/gNMmVw
https://codepen.io/anon/pen/orLWPz

Answer 2

[artuh_a]

Используй селектор :nth-child

Например, первые 2 элемента:

table td:nth-child(-n+2) {
/**/
}

Comments

[im_dimas]

Тени накладываются на предыдущую ячейку

Answer 3

[Monkariarti]

Привет, попробуй объединить ячейки с помощью colspan, применить к этой ячейке стиль, а внутри объединенной ячейки создай еще одну таблицу в которой снова создай нужные столбцы.

Не знаю как среагирует свойство на объеденные ячейки, возможно прокатит, надеюсь идею понял :)