Свойство CSS3 border-radius и border-collapse: collapse не смешиваются. Как я могу использовать border-radius для создания свернутой таблицы с закругленными углами?

Question

Редактировать - Оригинальное название: Есть ли альтернативный способ достижения border-collapse:collapse в CSS (чтобы иметь свернутую таблицу углов с закругленными углами)?

Поскольку выясняется, что просто сворачивание границ таблицы не решает проблему с корнем, я обновил заголовок, чтобы лучше отразить обсуждение.

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

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

Вот проблема. Я также хочу установить свойство border-collapse:collapse, и когда оно установлено, border-radius больше не работает. Есть ли способ на основе CSS, которым я могу получить тот же эффект, что и border-collapse:collapse, фактически не используя его?

редактирует:

Я сделал простую страницу, чтобы продемонстрировать проблему здесь (только Firefox / Safari).

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

Краткое изложение предлагаемых решений:

Окружение стола другим элементом с закругленными углами не работает, потому что квадратные углы стола "просвечивают".

Указание ширины границы равной 0 не приводит к свертыванию таблицы.

Нижний td углы все еще остаются квадратными после установки ячейки в ноль.

Использование вместо этого JavaScript - помогает избежать проблемы.

Возможные решения:

Таблицы генерируются в PHP, поэтому я мог бы просто применить разные классы к каждому из внешних th / tds и стилизовать каждый угол отдельно. Я бы предпочел не делать этого, так как это не очень элегантно и немного болезненно применять к нескольким таблицам, поэтому, пожалуйста, продолжайте вносить предложения.

Возможное решение 2 - использовать JavaScript (в частности, jQuery) для стилизации углов. Это решение также работает, но все еще не совсем то, что я ищу (я знаю, что я привередлива). У меня есть две оговорки:

1. это очень легкий сайт, и я бы хотел, чтобы JavaScript был минимальным
2. часть призыва, что использование border-radius имеет для меня грациозную деградацию и прогрессивное улучшение. Используя border-radius для всех закругленных углов, я надеюсь, что в браузерах с поддержкой CSS3 будет постоянно округленный сайт, а в других - постоянно квадратный сайт (я смотрю на вас, IE).

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

Answer 1

Я всегда так делаю, используя Sass

table {
  border-radius: 0.25rem;
  thead tr:first-child th {
    &:first-child {
      border-top-left-radius: 0.25rem;
    }
    &:last-child {
      border-top-right-radius: 0.25rem;
    }
  }
  tbody tr:last-child td {
    &:first-child {
      border-bottom-left-radius: 0.25rem;
    }
    &:last-child {
      border-bottom-right-radius: 0.25rem;
    }
  }
}