如何隱藏HTML表中的列？

128

您需要爲此使用樣式表。

<td style="display:none;">

來源

2011-03-26 06:30:12 Anuraj

+1

那麼只有第一coloumn使用CSS的HTML – 2015-09-08 19:18:56

+0

我應該如何添加樣式，當我使用javascript createelement（TD）表; – 2015-09-08 19:20:16

+1

@ office302僅將此樣式應用於第一個td？或者你只想使用CSS - 你可以這樣做：'td：first-child {display：none; }' – Anuraj 2015-09-09 06:08:46

1

您還可以做什麼VS開發由通過迭代列，並在特定的索引設置TD元素有這種風格分配使用JavaScript編程風格建議。

來源

2011-03-26 06:31:57 tamarintech

21

你也可以使用：

<td style="visibility:hidden;"> 
or 
<td style="visibility:collapse;">

是「隱藏」隱藏單元格它們之間的區別，但它擁有的空間，但用「崩潰」的空間並不像舉行顯示：無。這在隱藏整列或行時非常重要。

來源

2012-11-22 11:52:44

+0

感謝分享這個簡單的技巧。 – KristCont 2016-03-08 03:07:49

+0

我發現，對於div標籤崩潰也將佔據空間。對於div標籤，你必須使用display：none;以真正的崩潰而不是佔有這個空間。 – 2016-04-03 11:30:46

+3

'visibility：collapse'是專門爲處理單元格顯示/隱藏而設計的，因爲在重新計算單元格寬度/高度與「display：none」之間有差別。見https://developer.mozilla.org/en-US/docs/Web/CSS/visibility#Values – SteveB 2016-09-23 07:18:18

74

可以使用nth-child CSS選擇器來隱藏一整列：

#myTable tr > *:nth-child(2) { 
    display: none; 
}

這個工程下假設該列的單元格N（無論是th或td）永遠是第N子元素的行。

Here's a demo.

如果你想在列數是動態的，你能做到這一點使用querySelectorAll或任何框架呈現了類似的功能，像jQuery這裏：

$('#myTable tr > *:nth-child(2)').hide();

Demo with jQuery

（jQuery解決方案也適用於legacy browsers that don't support nth-child）。

來源

2012-11-22 12:08:20 Kos

+0

這可能會有破壞性的副作用，請參見[我的答案]（http://stackoverflow.com/a/29500414/616644）爲改進的解決方案。 – 2015-04-07 20:12:22

+0

@RickSmith好點。更新我的帖子以避免另一種方式的問題（使用子選擇器）。 – Kos 2015-04-07 20:38:33

+0

小孩選擇器絕對更好。好答案。 – 2015-04-07 20:42:51

19

科斯的答案几乎是正確的，但可能有破壞性的副作用。這是更正確的：

#myTable tr td:nth-child(1), #myTable th:nth-child(1) { 
    display: none; 
}

CSS（層疊樣式表）將級聯屬性，所有的孩子。這意味着*:nth-child(1)將隱藏第一個td的每個tr和和隱藏所有td孩子的第一個元素。如果你的td有任何東西像按鈕，圖標，輸入或選擇，第一個將被隱藏（woops！）。

即使你不目前有東西會被隱藏，如果你需要添加一個，你的挫折感。不要像這樣懲罰你的未來自我，這將是一個痛苦的調試！

我的答案只會隱藏第一個td和th所有tr在#myTable保持您的其他元素安全。在th.You表和.hidecol

來源

2015-04-07 20:11:27

2

<style> 
 
.hideFullColumn tr > .hidecol 
 
{ 
 
    display:none; 
 
} 
 
</style>

使用.hideFullColumn不需要在TD添加類單獨因爲這將是問題，因爲指數可能不是每個TD的心態。

來源

2015-05-08 08:32:18

6

自舉人使用.hidden類<td>。

來源

2016-01-07 17:26:11 theapache64

3

您也可以使用col元素https://developer.mozilla.org/en/docs/Web/HTML/Element/col

要隱藏在一個表中的第二欄隱藏的列：

<table> 
    <col /> 
    <col style="visibility:collapse"/> 
    <tr><td>visible</td><td>hidden</td></tr> 
    <tr><td>visible</td><td>hidden</td></tr>

已知問題：這會不會在谷歌瀏覽器的工作。請投票的錯誤在https://bugs.chromium.org/p/chromium/issues/detail?id=174167

來源

2016-12-31 16:16:13

如何隱藏HTML表中的列？

回答

相關問題