Редагувати - Оригінальна назва: Чи є альтернативний спосіб досягнення 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 мав найнижчий мінімум
- Частина заклику, що використання радіуса кордону для мене є витонченою деградацією та прогресивним посиленням. Використовуючи радіус кордону для всіх закруглених кутів, я сподіваюся мати стабільно округлий сайт у браузерах, що підтримують CSS3, та стабільно квадратний сайт в інших (я дивлюся на вас, IE).
Я знаю, що намагатися зробити це за допомогою CSS3 сьогодні може здатися непотрібним, але у мене є свої причини. Я також хотів би зазначити, що ця проблема є результатом специфікації w3c, а не поганою підтримкою CSS3, тому будь-яке рішення все ще буде актуальним та корисним, коли CSS3 має більш широку підтримку.