69
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?HTML tablosunda sütunlar nasıl gizlenir?
A
cevap
128
Bu amaçla Stil Sayfası kullanmanız gerekir.
<td style="display:none;">
1
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:
21
de kullanabilirsiniz hiçbiri. Bu, tüm bir sütunu veya satırı gizlerken önemlidir.
+0
bu basit hileyi paylaştığınız için teşekkürler. – KristCont
+0
Ben div etiketleri daraltmak için boşluk tutacağını buldum. Div etiketleri için ekran kullanmanız gerekecek: none; Gerçekten çökmek ve alanı tutmamak için. –
+3
: Görünürlük: çökme, hücre gösterme/gizleme için özel olarak tasarlanmıştır, çünkü bu ve "display: none" arasındaki hücre genişliğini/yüksekliğini yeniden hesaplarken bir fark vardır. Bkz. Https://developer.mozilla.org/en-US/docs/Web/CSS/visibility#Values – SteveB
74
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.
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();
(JQuery çözümü ayrıcaüzerinde çalışır.).
+0
Bu, zarar verici yan etkilere sahip olabilir, bkz. [Aşağıdaki cevabım] (http://stackoverflow.com/a/29500414/616644) geliştirilmiş bir çözüm için. –
+0
@RickSmith İyi nokta. Sorunu başka bir şekilde (çocuk seçiciyi kullanarak) önlemek için gönderim güncellendi. – Kos
+0
çocuk seçici kesinlikle daha iyi. İyi cevap. –
19
İ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
2
<style>
.hideFullColumn tr > .hidecol
{
display:none;
}
</style>kullanım .hideFullColumn bireysel td sınıfı eklemek gerekmez .
6
Bootstrap kullanıcıları, <td> numaralı telefondan .hidden sınıfını kullanır.
3
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
'a oy verin. Sadece html –
css kullanarak ilk coloumn nedir? Javascript createelement (td) kullanarak tablo oluştururken nasıl stil eklemeliyim? –
@ office302 Bu stili yalnızca ilk td'ye uygula? Ya da sadece CSS kullanmak istiyorsun - Bu böyle bir şey yapabilirsin: td: ilk çocuk { ekran: yok; } ' – Anuraj