Редактировать - Оригинальное название: Есть ли альтернативный способ достижения 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) для стилизации углов. Это решение также работает, но все еще не совсем то, что я ищу (я знаю, что я привередлива). У меня есть две оговорки:
- это очень легкий сайт, и я бы хотел, чтобы JavaScript был минимальным
- часть призыва, что использование border-radius имеет для меня грациозную деградацию и прогрессивное улучшение. Используя border-radius для всех закругленных углов, я надеюсь, что в браузерах с поддержкой CSS3 будет постоянно округленный сайт, а в других - постоянно квадратный сайт (я смотрю на вас, IE).
Я знаю, что пытаться сделать это с помощью CSS3 сегодня может показаться ненужным, но у меня есть свои причины. Я также хотел бы отметить, что эта проблема является результатом спецификации w3c, а не плохой поддержки CSS3, поэтому любое решение будет по-прежнему актуальным и полезным, когда CSS3 получит более широкую поддержку.