：在未用于Firefox中的表格之前

Question

我在Firefox下放置表格存在问题。该代码在chrome和safari下可以正常工作。

该问题的“实时”版本可以为seen here，但下图显示了该问题。

插入表格的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也是如此。

Answer 1

如果您想像pseudo一样使用:before，则必须设置content
例如：

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

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