HTML tablosunda sütunlar nasıl gizlenir?

Question

ASPX'te bir tablo oluşturdum. İhtiyaca göre sütunlardan birini gizlemek istiyorum ancak HTML tablo yapısında visible gibi bir özellik yok. Sorunumu nasıl çözebilirim?

Answer 1

Bu amaçla Stil Sayfası kullanmanız gerekir.

<td style="display:none;"> 

Answer 2

Ayrıca dev vs sütunların üzerinden yineleme ve bu stili olması, belirli bir dizinde td elemanını ayarlayarak JavaScript stil atayarak programlı anlaşılacağı ne isterse yapabilir.

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

"gizli" hücreyi gizlediği aralarındaki farkın ama alan barındırır ama "çöküş" ile uzay ekran gibi tutulmazsa:

Answer 3

de kullanabilirsiniz hiçbiri. Bu, tüm bir sütunu veya satırı gizlerken önemlidir.

Answer 4

Hepsinin bir sütunu gizlemek için nth-child CSS seçici kullanabilirsiniz:

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

Bu sütunun bir hücre N varsayımı altında çalışır (ister bir th veya td) her zaman N. çocuk unsurudur onun kürek çekmek.

Here's a demo.

---

sütun numarası dinamik olmasını istiyorsanız, yapabileceğini burada jQuery gibi benzer işlevler sunan querySelectorAll veya herhangi çerçevesini kullanarak:

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

Demo with jQuery

(JQuery çözümü ayrıcaüzerinde çalışır.).

Answer 5

İstanköy'ün cevabı neredeyse haklı ama zarar verici yan etkilere sahip olabilir. Bu daha doğrudur:

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

CSS (Cascading Style Sheets) olacak olan çocukların tümüne çağlayan nitelikleri. Bu, *:nth-child(1)'un her trVE'un ilk td'unu gizleyeceği anlamına gelir ve tüm td çocukların ilk öğelerini gizler. td'unuzdan herhangi birisinin düğmeler, simgeler, girişler veya seçimler gibi şeyleri varsa, ilk olanı gizlenir (woops!).

şu an şu anda gizlenmeyecek şeylere sahipseniz bile, bir tane eklemeniz gerekiyorsa, hayal kırıklığınızı yoldan ayırın. Geleceğini kendin gibi cezalandırma, bu hata ayıklaması için bir acı olacak!

Benim cevabım sadece güvende diğer elemanları tutarak #myTable tüm tr ilk td ve th gizler.endeks her td zihninde olmayabilir çünkü sorun olacak şekilde th.You tablonun ve .hidecol içinde

Answer 6

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

kullanım .hideFullColumn bireysel td sınıfı eklemek gerekmez .

Answer 7

Bootstrap kullanıcıları, <td> numaralı telefondan .hidden sınıfını kullanır.

Answer 8

Ayrıca tabloda ikinci sütunu gizlemek için sütun elemanı https://developer.mozilla.org/en/docs/Web/HTML/Element/col

kullanarak bir sütun gizleyebilirsiniz:

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

Bilinen sorunlar: Bu Google Chrome'da çalışmaz. Lütfen hata için https://bugs.chromium.org/p/chromium/issues/detail?id=174167