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

Question

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

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

无效

如何创建 table 单元格和折叠边框之间有空格，内联 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

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

谢谢

Answer 1

以下嵌入的CSS代码段可用于设置带折叠边框的单元格间距。

<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>

Answer 2

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

.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>

Answer 3

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

例如：

<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>

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

How to set cell spacing with collapsed borders using inline CSS

html

css

html-table