gpt4 book ai didi

html - Firefox 不尊重可见性 :hidden on table header

转载 作者:可可西里 更新时间:2023-11-01 13:36:50 24 4
gpt4 key购买 nike

我想隐藏表中第一列的标题,这样看起来:

table with desired look

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

how firefox handles the same CSS

如何让 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; }

最佳答案

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

<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>

关于html - Firefox 不尊重可见性 :hidden on table header,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14543784/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com