Firefox 不尊重可见性：隐藏在表头上答案

【问题标题】：Firefox not respecting visibility:hidden on table headerFirefox 不尊重可见性：隐藏在表头上
【发布时间】：2013-01-10 17:08:26
【问题描述】：

我希望隐藏表格中第一列的标题，以获得这样的外观：

所以我使用 CSS visibility: hidden; 来做到这一点。上面的屏幕截图是在 Chrome 中拍摄的，它可以完美运行。然而，这发生在 Firefox 中：

如何让 Firefox 隐藏表格中第一列的标题？

编辑：这是我的表格 CSS，应要求：

.styledtable{
    width:100%;
    table-layout:fixed; /*each column same width, unless width explicitly specified*/
    border:1px solid black;
    border-collapse:collapse;
}
.styledtable td, .styledtable th{
    border:1px solid black;
    padding:3px;
}

.styledtable th{ background:#cfcfcf; }
.styledtable td{ background:white; }

/* in a table with the first columnn empty (ie. with actions in the column below it),
 * make the first column take up space, but not actually appear.
 * Usage: <th style="width:40%;" class="firstcol">&nbsp;</th>
 */
.firstcol{
    visibility:hidden;
}

/*every second row different color, if the table itself doesn't have the class "no-odd-row-highlight"*/
.styledtable:not(.no-odd-row-highlight) tr:nth-child(odd) td{ background:#eeeeee; }

【问题讨论】：

标签： html css firefox html-table

【解决方案1】：

这适用于所有主流浏览器：

<style type="text/css">
table {
    border: none;
    padding: 0;
    border-spacing: 0;
    border-collapse: collapse;
}

table th,
table td {
    margin: 0;
    background: #fff;
    border: 1px solid #000;
    padding: 0;
}

table th.hidden {
    border: none;
    visibility: hidden;
}
</style>

<table>
<tr>
<th class="hidden"></th>
<th>ID</th>
<th>Something</th>
</tr>
<tr>
<td>Options</td>
<td>1</td>
<td>---</td>
</tr>
</table>

【讨论】：

抱歉，不走运。顺便说一句，没有 cell-padding 或 cell-spacing 这样的 CSS 属性。
嗯，你确定吗？这可能是一个类继承问题。试试.styledtable th.firstcol { border: none; visibility: hidden; } 它正在工作，看看这个小提琴：jsfiddle.net/wNkCg
耶，终于成功了！不得不：a）从table本身中删除border:1px solid black（但将其留在table td, table th上，并且b）给border:none一个!important，因为它被覆盖了，我不知道是什么by...（即使 Chrome 的开发工具告诉我，如果它没有 !important，它也会被覆盖，但不是 by）

【解决方案2】：

取决于您想要在样式中实现什么，但通常，将相关元素的（颜色/背景色/边框-（左上角）-颜色（在这种情况下））设置为“透明”通常适用于跨浏览器。

希望这对某人有所帮助。

【讨论】：