如何在不安装插件的情况下为 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>

如何为该表格添加边框？谷歌指出了大量以 wordpress 表格为中心的插件，我绝对不想为我的网站添加一个像表格这样简单的插件。

除了插件解决方案之外，我遇到的所有其他解决方案都指示编辑 HTML 代码并在每个 <td> 标记中添加代码作为边框。这个解决方案也不起作用，因为我有多个表。

如何向 Wordpress 添加一个表格，该表格包含所有单元格之间的边框，并且在单元格周围都包含一个强外部边框？

Answer 1

编辑：我很抱歉我没有看到这个：

这个解决方案也不起作用，因为我有多个表。

为了在每个表格上生成边框，您需要使用 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;
 }

当然，2px 宽度和黑色只是作为示例，您可以将这些值设置为您喜欢的任何值。

Answer 2

（在编辑问题后编辑）

在 Wordpress 块编辑器 (Gutenberg) 中，对于您添加的每个块，都可以选择添加 CSS 类。这是块设置中的最后一个选项（当该块被选中时）。所以在那里添加任何术语，例如“mynewtable1”。

然后打开主题定制器（左侧管理边栏中的菜单设计 > 定制器），在“自定义 CSS”字段中，添加两个 CSS 规则，如下所示：

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

第一条规则将在表格周围创建较粗的边框并确保单元格边框不会加倍，第二条规则用于单元格边框本身。

在其中选择您喜欢的边框厚度和颜色。 这应该可以解决问题...

另一个补充：

如果您希望它适用于每个表，请忘记该类，只需在自定义程序自定义 CSS 字段中插入以下规则：

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