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

[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;
}
< /code>
Это работает и дает мне округлые углы в каждом ряду, которые я хочу. Проблема в том, когда я устанавливаю фоновое изображение для элемента  

, углы изображения не обрезаны. > Свойство, которое я мог бы установить на прокладку . Это, теоретически, делает то, что мне нужно. Зажигает фон по углам. Однако, я подозреваю, что проблема заключается в том, что я устанавливаю радиус границы на элементах , поэтому, если я добавляю закладку в или < 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;
}
< /code>
, который также не влияет. Опять же, я предполагаю, что это связано с тем, что фоновое изображение устанавливается на  

, что означает, что в этом случае не имеет переполнения. И настройка переполнения: hidden; на элементе также не оказывает эффекта, поскольку сам не имеет округлых углов.
Стоит также отметить, что моя таблица является таблицей данных. Это означает, что любое решение, которое я придумываю, необходимо придерживаться стандартной структуры таблицы HTML. Итак, нет дополнительного в , чтобы установить фоновое изображение. br/>
только только С округлыми углами

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