我正在尝试在table
中的行之间创建间隔符/分隔符(请注意,它不是在每一行之间,而只是在一些特定的行之间)。我所采用的方法是创建一个空的tr
(为了增加一些空间),并向其添加伪元素tr:after
(画一条灰色的水平线坐在那个空白的中心)。一切都运行得非常好,直到我在Safari上试用。
在Chrome、Firefox和Edge中(预期):https://ibb.co/wNSykPQ
在Safari浏览器中:https://ibb.co/0tsLkym
这是我的标记:
<table class="context-menu">
<tr>
<td>Cut</td>
<td>Ctrl+X</td>
</tr>
<tr class="spacer"></tr>
<tr class="disabled">
<td>Paste</td>
<td>Ctrl+Z</td>
</tr>
<tr>
<td>Copy</td>
<td>Ctrl+C</td>
</tr>
</table>
以下是tr.spacer
的样式:
table.context-menu tr.spacer {
position: relative;
height: 8px;
}
table.context-menu tr.spacer:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
height: 1px;
width: 100%;
background-color: var(--item-disabled);
}
完整演示请点击此处:https://jsfiddle.net/tfkox4yc/10/
我已经显式地将tr.spacer
的位置设置为relative
,所以伪元素tr.spacer:after
应该遵守tr.spacer
的位置。我添加了top 0
、bottom 0
和margin-top
margin-bottom
auto
,使其垂直居中于tr.spacer
。但是在Safari中,情况似乎并非如此。看起来伪元素是相对于表的,而不是它的父元素。这里我遗漏了什么吗?
2条答案
按热度按时间jhdbpxl91#
如果我没理解错的话,你想创建一个上下文菜单,并且只在特定的行之间放置一个分隔符。我尝试给表格行设置样式,结果好坏参半,尝试给分隔符行添加[td]元素,然后给它们设置样式。但是,除了使用[table],也许可以考虑使用[menu]。
表格:
菜单:
一个二个一个一个
ryoqjall2#
您的
tr.spacer
为 * 空 *,即不包含任何(td
)单元格,这是无效的HTML。每行必须具有相同数量的单元格(或者必须具有相应的colspan
属性)因此HTML应该如下所示:
我在Safari中用你的jsfiddle试过了,效果很好。