增加<th>标签<table>的虚线边框间距
提问于 2022-02-16 07:42:37
下面是代码，如下所示：https://codesandbox.io/s/cranky-wu-swzjts
正如您可以看到的代码输出，标题标签已经在顶部和底部虚线边框。我试图增加虚线边界之间的间隔，但没有成功。另外，我想在这里增加每一个短跑的宽度，但我不能这样做。
当前代码如下
-- 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' }}>无论我如何努力添加边距：‘10 px0’，或填充或宽度和任何边框间距，我无法增加每个破折号之间的间距，并增加每个短跑的宽度。
有人能让我知道如何做到这一点吗？
我正努力实现这一目标
回答 2
Stack Overflow用户
回答已采纳
发布于 2022-02-16 09:56:01
一个简单的答案是放弃尝试使用CSS边框设置，因为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>
Stack Overflow用户
发布于 2022-02-16 07:51:49
编辑的答案-我之前在那里有一个思考错误：
您需要将填充添加到单元格中，而不是行。要只影响表标题行中的单元格，基本上可以如下所示，因为第一行包含标头单元格(th)，所有其他单元格--常规单元格(td)：
th {
padding-top: 1rem;
padding-bottom: 1rem;
}如果在其他位置也有th单元格(例如，所有行中的所有第一个单元格作为行的标题)，则会变得更加复杂。但就基本功能而言，上述各项应已足够。
关于注释中关于内联CSS的问题:当然，但是您必须将style:padding-top:1rem;padding-bottom:1rem>属性添加到每个th中。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71144883
复制相关文章
腾讯云开发者
