Применение внутренней границы для ячеек таблицы в CSS

Быстрый ответ

Если вам нужно применить границы внутри таблицы, используйте CSS-свойство border для ячеек, исключая периферийные. Установите для таблицы свойство border-collapse: collapse;, а границы задайте, используя псевдоклассы :not(:first-child):not(:last-child). Вот нормативный пример кода:

table {border-collapse: collapse;}
td, th { padding: 8px; border: 1px solid transparent; }
tr:not(:first-child):not(:last-child) td,
tr td:not(:first-child):not(:last-child),
tr:first-child td:not(:first-child):not(:last-child),
tr:last-child td:not(:first-child):not(:last-child) {
    border-color: #000;
}

Таким образом, мы оформим таблицу как «матрицу», где границы между ячейками совместные, а внешняя рамка отсутствует.

Разрешение конфликтов границ

Когда границы конфликтуют, вам может пригодиться CSS-свойство border-style: hidden;. В соответствии с W3C, это свойство незаметно устраняет конфликты. Еще проще справиться с этой задачей можно с помощью HTML-атрибутов frame="void" и rules="all". Пример кода ниже:

table  { border-collapse: collapse; frame: void; rules: all; }
td, th { border: 1px solid black; }

Этот подход сочетает в себе возможности CSS и HTML для регулирования внутреннего пространства таблицы.

Устранение несоответствия браузеров

Однако веб-браузеры могут вести себя непредсказуемо, особенно устаревшие версии, такие как IE7 или IE8, не поддерживающие современные CSS-псевдоклассы. Но не отчаивайтесь:

• Применяйте свойство td + td, th + th { border-left: 1px solid; } для вертикального разделения ячеек.
• Для горизонтальных внутренних границ подойдет селектор tr + tr { border-top: 1px solid; }.
• Для IE7 можно применить селекторы вида: tr + tr > td, tr + tr > th.

Не забудьте проверить результат в различных браузерах — это важная часть работы разработчика.

Обеспечиваем адаптивность дизайна

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

Визуализация

Представьте, что участники вечеринки занимают свои места:

Участники: 💁💁‍♂️ 🚶 💁💁‍♂️ 🚶 💁💁‍♂️

Теперь они соблюдают дистанцию, как это происходит с внутренними границами в таблице:

Участники на расстоянии: 💁🔲💁‍♂️🔲 🚶 💁🔲💁‍♂️🔲 🚶 💁🔲💁‍♂️ 
# Каждый 🔲 — это внутренняя граница

Доступность таблиц

Таблицы должны быть доступны всем пользователям, включая тех, кто использует электронные читалки. Добавьте атрибуты scope="col" или scope="row" к ячейкам-заголовкам таблицы и используйте цвета с высоким контрастом для текста и границ.

Эффективность CSS-селекторов

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

Завершение

Не забывайте демонстрировать свои знания и результаты работы коллегам и клиентам, но без фанатизма: показывайте свои успехи по запросу, предоставляя примеры, демонстрации и ссылки на проверенные источники.

Полезные материалы

1. Box Sizing | CSS-Tricks — подробное руководство по свойству box-sizing.
2. HTML table tag — детальное описание тега таблицы.
3. CSS Styling Tables — обучающий материал по стилизации таблиц с использованием CSS.
4. box-sizing – CSS: Cascading Style Sheets | MDN — всё, что вам нужно знать о свойстве box-sizing.
5. Top 10 CSS Table Designs — Smashing Magazine — десять стильных решений для дизайна таблиц.
6. Essential CSS Properties for Styling Tables – Tutorial Republic — основные свойства для стилизации таблиц.