[英]Toggle table columns with <colgroup>
刚刚发现<colgroup>
标签。 尝试使用它来切换列。 适用于背景颜色之类的东西,但不隐藏。
http://www.w3schools.com/tags/tag_colgroup.asp
table-column也是显示属性,所以我在想,是的,太好了!
http://www.w3schools.com/cssref/pr_class_display.asp
似乎并不那么简单。 话题和讨论倾向于深入到高级jQuery中。 为什么是这样?
我的桌子是这样的:
<table style="vertical-align: middle;">
<colgroup>
<col id="c1">
<col id="c2">
<col id="c3">
<col id="c4">
<col id="c5">
</colgroup>
<tr id="d1">
<td style="text-align: right; vertical-align: middle;">1/2 D note:</td>
等等
使用切换按钮:
<a href="javascript:toggleCol2();"><img src="/ico/ms.gif" class="ico" alt="X" title="toggle milli-seconds" id="col_ms">milli-seconds</a>
而这个JavaScript:
var Col2 = 1;
function toggleCol2() {
if (Col2 == 0) {
window.document.getElementById('c2').style.display = "table-column";
window.document.getElementById('col_ms').style.opacity = "1";
Col2 = 1;
} else if (Col2 == 1) {
window.document.getElementById('c2').style.display = "none";
window.document.getElementById('col_ms').style.opacity = "0.2";
Col2 = 0;
}
}
来自此文件: http : //flamencopeko.net/bpm_calc.js
这是测试页: http : //flamencopeko.net/bpm_calc_col.php
使用折叠值作为所需col标签的可见性属性。 例如,用于隐藏列c2的用途:
#c2 {
visibility: collapse;
}
还要将折叠列的宽度归零,将col元素的宽度设置为0,同时将table元素的table-layout css属性设置为固定值:
#c2 {
visibility: collapse;
width:0;
}
和
<table style="table-layout:fixed;...">
...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.