如何使用内联 CSS 设置带有折叠边框的单元格间距答案

【问题标题】：How to set cell spacing with collapsed borders using inline CSS如何使用内联 CSS 设置带有折叠边框的单元格间距
【发布时间】：2021-08-27 08:56:07
【问题描述】：

我知道“border”、“cellpadding”和“cellspacing”已用于表格属性。

当改用 css 时，我读到样式属性“border-spacing:”，例如如果border-collapse: collapse，border-spacing: 3; 无效。

如何使用内联 css 在单元格和折叠边框之间创建带有空格的表格？由于各种原因，我正在使用内联 css。

我目前使用的代码是：

<table style='border: 1px solid black; border-spacing: 5; border-collapse: collapse'>
  <tr>
    <th>a</th>
    <th>b</th>
  </tr>
  <tr>
    <td>c</td>
    <td>d</td>
  </tr>
</table>

期望的输出： https://pasteboard.co/KhHooTH.png

电流输出： https://pasteboard.co/KhHoRDK.png

由于我的声誉低，我无法内嵌显示图像。

谢谢

【问题讨论】：

标签： html css html-table

【解决方案1】：

如果你想内联，你还必须将样式添加到单元格中。

例如：

<table style='border: 1px solid black; border-spacing: 5; border-collapse: collapse'>
    <tr style='border: 1px solid black;'>
        <th style='border: 1px solid black;'>a</th>
        <th>b</th>
    </tr>
    <tr>
        <td style='border: 1px solid black;'>c</td>
        <td>d</td>
    </tr>
</table>

【讨论】：

设置为回答必须添加到每个单元格。谢谢

【解决方案2】：

使用rules="all" 到表格（拥有所有边框），然后为每个单元格设置填充（如果你想要内联样式，你也可以这样做）：

.myTable TR TH, .myTable TR TD {
  padding: 5px;
}

<table class="myTable" style='border: 1px solid black;' rules="all">
  <tr>
    <th>a</th>
    <th>b</th>
  </tr>
  <tr>
    <td>c</td>
    <td>d</td>
  </tr>
</table>

【讨论】：

谢谢。我想这些选项要么是您建议的

【解决方案3】：

以下嵌入的CSSsn-p可用于设置带折叠边框的单元格间距。

<table style="border:1px solid black;border-collapse:collapse;">
  <tr>
    <th style="border:1px solid red;">Table Header</th>
    <th style="border:1px solid red;">Table Header</th>
  </tr>
  <tr>
    <td style="border:1px solid red;">Table cell 1</td>
    <td style="border:1px solid red;">Table cell 2</td>
  </tr>
  <tr>
    <td style="border:1px solid red;">Table cell 3</td>
    <td style="border:1px solid red;">Table cell 4</td>
  </tr>
</table>

【讨论】：