Как добавить рамку в таблицу WordPress без установки плагина?

Question

Я попытался добавить таблицу на сайт Wordpress с помощью редактора Гутенберга.

Таблица имеет следующий код:

<figure class="wp-block-table aligncenter is-style-stripes">
   <table class="has-subtle-pale-blue-background-color has-background">
      <thead>
         <tr>
            <th class="has-text-align-center" data-align="center">Heading1</th>
            <th><strong>Heading2</strong></th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td class="has-text-align-center" data-align="center">text1</td>
            <td>value1</td>
         </tr>
         <tr>
            <td class="has-text-align-center" data-align="center">text2</td>
            <td>value2</td>
         </tr>
         <tr>
            <td class="has-text-align-center" data-align="center"></td>
            <td></td>
         </tr>
      </tbody>
   </table>
</figure>

Как добавить границу к этой таблице? Google указывает на огромный диапазон плагинов, сосредоточенных вокруг таблиц WordPress, и я абсолютно не хочу добавлять еще один плагин на мой сайт для чего-то столь же простого, как таблица.

Помимо решения для плагинов, все другие решения, которые я ' Мы натолкнулись на указание отредактировать код HTML и добавить код в каждый тег <td> для границы. Это решение также не будет работать, потому что у меня впереди несколько таблиц.

Как добавить таблицу в Wordpress, которая содержит границу между всеми ячейками и которая содержит сильную внешнюю границу вокруг ячеек?

Answer 1

(отредактировано после отредактированного вопроса)

В редакторе блоков Wordpress (Гутенберг) для каждого добавляемого блока есть возможность добавить класс CSS. Это самая последняя опция в настройках блока (пока этот блок выбран). Поэтому добавьте туда любой термин, например «mynewtable1».

Затем откройте настройщик темы (меню «Дизайн»> «Настройщик» на левой боковой панели администратора), там есть поле для «custom CSS» и добавьте два css правил вот так:

.mynewtable1 {
  border: 3px solid black;
  border-collapse: collapse;
}
.mynewtable1 td, .mynewtable1 th {
   border: 1px solid #999;
}

Первое правило создаст более толстую границу вокруг стола и убедится, что границы ячеек не удвоятся, второе - для самих границ ячеек.

Выберите там, где вам нравится толщина и цвет рамки. Это должно сработать ...

ДРУГОЕ ДОБАВЛЕНИЕ:

Если вы хотите, чтобы это работало для каждой таблицы, забудьте о классе и просто вставьте следующие правила в настраиваемое поле custom CSS:

table {
  border: 3px solid black;
  border-collapse: collapse;
}
td, th {
   border: 1px solid #999;
}

Answer 2

РЕДАКТИРОВАТЬ: мои извинения я не видел это:

Это решение не будет работать, потому что у меня есть несколько таблиц впереди.

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

document.querySelectorAll('table').forEach(el => {
  el.style.outline="2px solid black"
)}

Исходный ответ

Вам необходимо добавить стиль css к таблице, что можно сделать напрямую (встроенно) следующим образом:

<table class="has-subtle-pale-blue-background-color has-background" style="outline: 2px solid black"> 

В качестве альтернативы можно добавить стиль css, например:

<table class="has-outline has-subtle-pale-blue-background-color has-background">

А потом в вашем css файле:

.has-outline {
    outline: 2px solid black;
 }

Конечно, ширина в 2 пикселя и черный - это просто пример, и вы можете установить эти значения так, как вам нравится.