hidden td 不接受表格中的宽度答案

【问题标题】：hidden td does not accept width in tablehidden td 不接受表格中的宽度
【发布时间】：2016-08-17 09:17:44
【问题描述】：

我有一个以表格格式显示数据的网格视图。我必须使表头变粘。所以使用一些 js 代码，我生成了表头的副本。我正在使用该副本显示为粘性标题（当用户滚动此标题时将显示）。

原始网格是自动生成的（我使用的是 Yii）。

table.items {
    background: white;
    border-collapse: collapse;
    width: 100%;
    border: 1px #D0E3EF solid;
}

<table class="items">
	<thead style="display: block;">
		<tr>
			<th id="property-grid-current_c0" style="width:46.1px !important;border-right:1px solid #000">Watch</th>
			<th class="" colspan="2" style="display: none;width:18.1px !important;border-right:1px solid #000" id="property-grid-current_c1">&nbsp;</th>
			<th class="" colspan="2" id="property-grid-current_c2" style="width:261px !important;border-right:1px solid #000">Property Name</th>
			<th id="property-grid-current_c3" style="width:86px !important;border-right:1px solid #000">SVP</th>
		</tr>
	</thead>
</table>

现在的问题是隐藏 td 的宽度对表格宽度没有影响。那么如何解决呢？

【问题讨论】：

标签： jquery html css yii

【解决方案1】：

尝试visibilityhidden;

table.items {
    background: white;
    border-collapse: collapse;
    width: 100%;
    border: 1px #D0E3EF solid;
}

<table class="items">
	<thead style="display: block;">
		<tr>
			<th id="property-grid-current_c0" style="width:46.1px !important">Watch</th>
			<th class="" colspan="2" style="visibility: hidden;width:18.1px !important;" id="property-grid-current_c1">&nbsp;</th>
			<th class="" colspan="2" id="property-grid-current_c2" style="width:261px !important">Property Name</th>
			<th id="property-grid-current_c3" style="width:86px !important">SVP</th>
		</tr>
	</thead>
</table>

【讨论】：

谢谢。现在的问题是 bg 颜色对该列没有影响。

【解决方案2】：

也许你的意思

visibility: hidden;

display: hidden 不存在

如果您需要保持标题背景颜色，那么您应该考虑让单元格可见并仅隐藏其内容，如下所示：

<th class="" colspan="2" style="width:18.1px !important;" id="property-grid-current_c1"><span style="visibility: hidden">&nbsp;</span></th>

【讨论】：

抱歉，打错了
@DS9 好吧，有了visibility: hidden;，你的问题应该解决了，不是吗？
现在的问题是标题颜色不影响该列。
@DS9 如果你需要，你应该考虑像其他人一样显示表格单元格并隐藏内容

【解决方案3】：

你可以像下面这样改变

<th class="" colspan="2" style="display: none;width:18.1px !important;" id="property-grid-current_c1">&nbsp;</th>

到

<th class="" colspan="2" style="display: hidden;width:18.1px !important;" id="property-grid-current_c1">&nbsp;</th>

有效

【讨论】：