Применение границ к строкам таблицы HTML без стилизации ячеек

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

Чтобы добавить рамку к строке таблицы в HTML, вам следует задать стиль рамки для элементов <td> или <th>, которые располагаются внутри этой строки. Использование свойства border-collapse: collapse; для элемента <table> сделает рамки более цельными.

<table style="border-collapse: collapse;">
  <tr>
    <td style="border: 1px solid black;">Ячейка 1</td>
    <td style="border: 1px solid black;">Ячейка 2</td>
    <td style="border: 1px solid black;">Ячейка 3</td>
  </tr>
</table>

Углубляемся в тему: Продвинутое оформление

Стилизация определённых строк

Стилизация конкретных строк возможна с помощью селектора tr:nth-child(). Этот подход обеспечивает вам гибкость в оформлении различных строк, делая ваш CSS значительно более адаптивным и универсальным.

table { border-collapse: collapse; }
tr:nth-child(even) { background-color: #f2f2f2; }
tr:nth-child(odd) { background-color: white; }

Подробнее об этом расскажет наш спикер на видео

Стилизация с помощью классов и идентификаторов

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

<tr class="bordered">
  <td>...</td>
  <td>...</td>
</tr>

.bordered td { border: 2px solid blue; }

Обводка: альтернатива рамке

Свойство outline позволит вам открыть новые возможности в стилизации. Оно создаёт эффект, схожий с рамкой, не влияя при этом на компоновку элементов. Можно сказать, что обводка – это своего рода рамка в метафорическом измерении.

tr.highlight { outline: 2px solid red; }

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

Представьте, что вы огораживаете определённый дом забором:

🏘️🏠🏡🏠🏘️ // Ряд домов без забора (без рамки)
🏘️🏠🏚️🏠🏘️ // Ряд домов с забором (с рамкой)

В этой аналогии, CSS – это ваш надёжный архитектор:

tr.selected { border: 2px solid #000; }

Фокус на ряде домов (ваши HTML-элементы):

Набор элементов: 🏠, 🏠, 🏚️, 🏠, 🏠

Применение CSS: 🏠 🏠 🏚️ 🏠 🏠
|| // Забор (рамка) устанавливается вокруг выделенного элемента.

Скругленные углы и имитация рамок

Воспользуйтесь свойством border-radius, применённым к элементам <td>, чтобы создать скругленные углы. Это как эффект "рыбьего глаза" для ваших ячеек. Сочетание с box-shadow даст возможность имитировать оформление всей строки рамкой.

tr.rounded-box { box-shadow: 0 0 0 3px #333; border-radius: 10px; }

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

Если рядом находятся элементы <td> с различными рамками, это может выглядеть несообразно. Чтобы этого избежать, задайте идентичную рамку для всех вкладываемых <td> и <th> в <tr> с определённым классом. Это будет напоминать заключение перемирия между стилями CSS.

.tr-border td, .tr-border th { border: 1px solid #000; }

Единообразное отображение в разных браузерах

Для обеспечения однородного отображения рамок в различных браузерах, всегда устанавливайте свойство border-collapse: collapse;. Ведь не все браузеры следуют одним и тем же правилам!

table { border-collapse: collapse; }

Оригинальные рамки

Чтобы создать уникальное оформление краёв строк <tr>, воспользуйтесь псевдоклассами :first-child и :last-child. Это как дать стильную "причёску" вашей таблице.

.tr-edge-style > :first-child { border-left: 2px solid green; }
.tr-edge-style > :last-child { border-right: 2px solid green; }

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

1. CSS Borders — Учебник по рамкам в CSS от W3Schools.
2. HTML tr tag — Описание тега <tr> на W3Schools.
3. CSS :nth-child() Selector — Инструкция по использованию псевдокласса :nth-child в CSS от W3Schools.
4. Introduction to the CSS basic box model — Обзор основ модели CSS Box на MDN Web Docs.
5. Pseudo-classes – CSS: Cascading Style Sheets — Справочник по псевдоклассам в CSS на MDN Web Docs.