Блог

Главная - Вопросы по программированию - Стилизация границ таблицы с помощью CSS

Стилизация границ таблицы с помощью CSS

#html #css

Вопрос:

Я пытаюсь сделать что-то очень простое: создать таблицу с границами в одну строку.

Есть много статей, в которых говорится, как это сделать, и почти все они включают что-то вроде

 table {
   border-collapse: collapse;
  }
td, th {
   border: 1px solid orange;
  }

Что отлично работает.

Но все они универсально применяют стиль к самим тегам td и th и, следовательно, применяются ко всем таблицам.

Поэтому я попробовал это

 .bordered {
    border-collapse: collapse;
    border: 1px solid orange;
    text-align: center;
    color: blue;
 }
<table class=bordered>
    <tr> <td> ABC </td> <td> DEF </td> </tr> 
    <tr> <td> HIJ </td> <td> JLK </td> </tr>
</table>

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

 table.bordered, tr.bordered, td.bordered {

безрезультатно. Также не помогло добавление «class=» в теги tr.

Я узнал, что свойства границ не наследуются.
Инспектор DOM подтверждает это: только цвет и центрирование наследуются элементами td из класса .bordered.

Мой вопрос заключается в следующем:

Как мне получить границы ячеек без добавления «class=» к каждому тегу td?

(Вариант использования будет, если на странице есть две таблицы, и я хочу, чтобы границы для них были оформлены по-разному).

Комментарии:

1. bordercollapse ? Возможна опечатка.

2. граница-свернуть* и попробуйте добавить отдельный стиль границы tr или td… например .граничит с тр

3. @OsvaldoCorreia, посмотри на это » codepen.io/Hritik25/pen/BaZeMrJ?editors=1100 «. И дайте мне знать, это то, чего вы пытаетесь достичь, или нет.

4. @Niloct — да, в bordercollapse была опечатка — теперь исправлена

5. @mr.lazy — да, это все — (если я добавлю border-collapse:свернуть; в раздел .td границы {} — Спасибо!

Ответ №1:

Просто возьмите css, который работает для всех таблиц, и добавьте table.bordered перед всеми ними:

 table.bordered {
   border-collapse: collapse;
}
table.bordered td,  table.bordered th {
   border: 1px solid orange;
} 
 <table class="bordered">
    <tr> <td> ABC </td> <td> DEF </td> </tr> 
    <tr> <td> HIJ </td> <td> JLK </td> </tr>
</table>

<table>
    <tr> <td> ABC </td> <td> DEF </td> </tr> 
    <tr> <td> HIJ </td> <td> JLK </td> </tr>
</table>
Метки: