Свойство border-radius и border-collapse:collapse не смешиваются. Как я могу использовать border-radius для создания све ⇐ CSS

[Anonymous]

Я пытаюсь создать таблицу с закругленными углами, используя свойство CSS border-radius. Стили таблиц, которые я использую, выглядят примерно так:

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

table {
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px
}

Вот в чем проблема. Я также хочу установить свойство border-collapse:collapse, и когда оно установлено, border-radius больше не работает. Есть ли способ на основе CSS получить тот же эффект, что и border-collapse:collapse, без его фактического использования?
Похоже, что большая часть проблемы заключается в том, что установка стола с закругленными углами не влияет на углы угловых элементов td. Если бы вся таблица была одного цвета, это не было бы проблемой, поскольку я мог бы просто скруглить верхний и нижний углы td для первой и последней строки соответственно. Однако я использую разные цвета фона для таблицы, чтобы различать заголовки и чередование, поэтому внутренние элементы td также будут иметь закругленные углы.
Окружение таблицы с другим элементом с закругленными углами не работает, поскольку квадратные углы таблицы «проступают».
Указание ширины границы равной 0 не приводит к сворачиванию таблицы.
Нижняя граница углы по-прежнему квадратные после установки нулевого пространства ячеек.
Таблицы генерируются на PHP, поэтому я мог бы просто применить разные классы к каждому внешнему th/td и стилизовать каждый угол отдельно. Я бы предпочел не делать этого, поскольку это не очень элегантно и сложно применять к нескольким таблицам, поэтому, пожалуйста, продолжайте получать предложения.
Я бы хотел сделать это без JavaScript.

Подробнее здесь: https://stackoverflow.com/questions/628 ... -can-i-use