时间戳

首页 > 解决方案 > :before 不用于 Firefox 中的表格

html - :before 不用于 Firefox 中的表格

问题描述

我在 Firefox 下放置表格时遇到问题。该代码在 chrome 和 safari 下运行良好。

可以在此处看到问题的“实时”版本， 但下图显示了问题。

在此处输入图像描述

插入表格的html代码的开始/结束如下所示，这是一个标准的html表格

<table>
<thead>
<tr class="header">
<th align="left">Navn</th>
<th align="left">Gruppe</th>
<th align="right">odds</th>
<th align="right">ELO</th>
<th></th>
....
</tr>
</tbody>
</table>

问题出现在 css 中的边距/宽度定义。相关代码如下图

table, table.booktabs {
   /* making booktabs style tables the unstyled default in case someone uses Markdown styling  */
   width: auto;
   margin: auto;
   border-spacing: 0px;
   border-top: 2px solid #333;
   border-bottom: 2px solid #333;
}

如果调整边距或宽度，则调整表格的宽度和位置，但不保留布局的列部分。左列（以及表格）的宽度在表格之前使用

table:before {
   width: 61%;
   display: inline-block;
}

但是那段代码在firefox下没有width: 61%;效果，所以从来没有设置宽度。有人可以告诉我为什么并提供可以跨浏览器工作的替代解决方案吗？哦，和它一样::before。

标签： htmlcss

解决方案

如果你想使用pseudo你:before必须设置content
例如：

table:before {
   content:"";
   width: 61%;
   display: inline-block;
}

在这里学习：https ://developer.mozilla.org/en-US/docs/Web/CSS/::before

推荐阅读