切換表格列與<colgroup>

剛剛發現<colgroup>標記。試圖使用它來切換列。適用於背景顏色等東西，但不能隱藏。切換表格列與<colgroup>

http://www.w3schools.com/tags/tag_colgroup.asp

表列的顯示屬性太多，所以我在想，是的，太棒了！

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您需要的山坳標籤的visibility屬性

來源

2014-01-19 Ole Sørensen

'col'是煩人限制性的。 http://quirksmode.org/css/css2/columns.html請參閱限制部分。 –

所以看起來。那麼至少我不必在這一件事上感到額外的愚蠢。謝謝。 –

使用崩塌值。例如。用於隱藏柱C2使用：

#c2 { 
    visibility: collapse; 
}

並且還要零出摺疊列的寬度，col元素的寬度設置爲0，而表元素的表格的佈局的CSS屬性設置爲固定值：

#c2 { 
    visibility: collapse; 
    width:0; 
}

和

<table style="table-layout:fixed;..."> 
...

來源

2014-01-20 09:24:04 Mohsenme

是的。我做到了。這確實有用。表格寬度未被維護。另外IE將產生的較小表格居中，而其他瀏覽器保持左對齊。當涉及到切換行時，我不會對我有什麼問題。現在在列切換時，我必須考慮一下我想如何工作/看。但我確實需要這些功能。不管是現在還是未來，都要欣賞所有的投入。我想我想要單元格改變寬度來填充表格。我會回到這個。謝謝。 –

不客氣。您還可以按百分比設置col元素的寬度屬性。 – Mohsenme

是的。我非常歡迎保持表寬的解決方案。 –

切換表格列與<colgroup>

回答

相關問題