为 <table> 的 <th> 标签增加虚线边框之间的间距

Question

我有以下codepen如下 https://codesandbox.io/s/cranky-wu-swzjts

如您所见，codepen 的输出，header 标签在顶部和底部有虚线边框。我试图增加虚线边框之间的间距但没有成功。另外，我想在这里增加每个破折号的宽度，但我做不到。

当前代码如下

-- HTML --
<th colspan="2" key={indx}>

-- CSS --
th {
  padding: 1rem;
}

th[colspan] {
  border-top: 1px dashed black;
  border-bottom: 1px dashed black;
}

我正在尝试将其作为内联样式来实现。我尝试了以下

<th style={{ borderBottom: '1px dashed #000', borderTop: '1px dashed #000', margin: '10px 0' }}>

无论我如何尝试添加边距：'10px 0'，或填充或宽度以及任何 border-spacing 到 th 样式，我都无法增加每个破折号之间的间距并增加宽度每个破折号。

谁能告诉我如何实现这一点。

我正在尝试通过这种方式实现

Answer 1

编辑后的答案 - 我之前有一个思维错误：

您需要将填充添加到 单元格 ，而不是行。要仅影响 table 标题行中的单元格，您基本上可以按如下方式编写，因为第一行包含 header 单元格 (th)，所有其他单元格都是常规单元格 (td):

th {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

如果您在其他位置也有 th 个单元格（例如，所有行中的所有第一个单元格作为行的标题），它会变得有点复杂。但是对于一个基本的功能，上面的应该足够了。

关于您评论中有关内联 CSS 的问题：当然可以，但是您必须将 style:padding-top:1rem;padding-bottom:1rem> 属性添加到 each th.

Answer 2

一个简单的答案是放弃尝试使用 CSS 边框设置，这可能因浏览器而异，并寻求对间距的完全控制（相对于元素宽度或绝对的，例如 px 单位）通过使用线性渐变的背景图像。

这是一个使用 % 大小调整的示例，但您可能希望它以 em 为单位，以使其在特定字体大小下看起来相似。

table thead tr {
  display: inline-block;
  padding: 1vmin;
  background-image: linear-gradient(to right, black 0 50%, transparent 50% 100%), linear-gradient(to right, black 0 50%, transparent 50% 100%);
  background-repeat: repeat no-repeat;
  background-size: 10% 1px;
  background-position: 0 0, 0 calc(100% - 1px);
  
}

<table><thead><tr><th colspan="2">PROJECT NAME</th><th colspan="2">BUILD</th></tr></thead></table>

为 <table> 的 <th> 标签增加虚线边框之间的间距

increase spacing between dashed border for <th> tag of <table>

html

css

html-table

css-selectors