Как мне создать таблицу со строками с закругленными углами и фоновым изображением? ⇐ Html

[Anonymous]

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

Код: Выделить всё

tr td::first-child {
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}

tr td:last-child {
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}

Это работает и дает мне закругленные углы в каждой строке, которые я хочу. Проблема в том, что когда я устанавливаю фоновое изображение для элемента , углы изображения не обрезаются.
Я читал о фоновом клипе > свойство, которое я мог бы установить в поле отступа. Теоретически это делает то, что мне нужно. Обрезает фон по углам. Однако я подозреваю, что проблема в том, что я устанавливаю радиус границы для элементов , поэтому, если я добавляю поле отступа либо к , либо к < tr> элементов, это не имеет никакого эффекта.
Я пробовал еще кое-что:

Код: Выделить всё

tr td::first-child {
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
overflow: hidden;
}

tr td:last-child {
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
overflow: hidden;
}

Что тоже не дает эффекта. Опять же, я предполагаю, что это связано с тем, что фоновое изображение устанавливается в , а это означает, что в этом случае не имеет переполнения. А установка переполнения: скрыто; для элемента также не имеет никакого эффекта, поскольку сам не имеет закругленных углов.
Также стоит отметить, что моя таблица представляет собой таблицу Datatables. Это означает, что какое бы решение я ни придумал, оно должно соответствовать стандартной структуре таблицы HTML. Поэтому в нет дополнительного для включения фонового изображения.
Вот пример того, что я собираюсь сделать


Только с закругленными углами

Подробнее здесь: https://stackoverflow.com/questions/793 ... round-imag