ASPX'te bir tablo oluşturdum. İhtiyaca göre sütunlardan birini gizlemek istiyorum ancak visibleHTML tablo oluşturmadaki gibi bir özellik yok . Sorunumu nasıl çözebilirim?
ASPX'te bir tablo oluşturdum. İhtiyaca göre sütunlardan birini gizlemek istiyorum ancak visibleHTML tablo oluşturmadaki gibi bir özellik yok . Sorunumu nasıl çözebilirim?
Yanıtlar:
Bu amaçla Stil Sayfası kullanmanız gerekir.
<td style="display:none;">
td:first-child { display:none; }
nth-childTüm bir sütunu gizlemek için CSS seçiciyi kullanabilirsiniz :
#myTable tr > *:nth-child(2) {
display: none;
}
Bu, N sütununun bir hücresinin (a thveya olsun td) her zaman satırının N. alt öğesi olduğu varsayımına göre çalışır .
Sütun numarasının dinamik olmasını istiyorsanız, bunu kullanarak querySelectorAllveya benzer işlevselliği sunan herhangi bir çerçeve kullanabilirsiniz, örneğin jQuery:
$('#myTable tr > *:nth-child(2)').hide();
(JQuery çözümü, desteklemeyen eski tarayıcılardanth-child da çalışır ).
Ayrıca kullanabilirsin:
<td style="visibility:hidden;">
or
<td style="visibility:collapse;">
Aralarındaki fark, hücreyi gizleyen, ancak alanı tutan, ancak "daraltma" ile alan, ekran gibi tutulmaz: yok. Bu, tüm bir sütun veya satırı gizlerken önemlidir.
visibility: collapseBu ve arasında hücre genişliğini / yüksekliğini yeniden hesaplarken bir fark olduğundan, özellikle hücre gösterme / gizleme işlemlerini gerçekleştirmek için tasarlanmıştır display:none. Developer.mozilla.org/en-US/docs/Web/CSS/visibility#Values
Kos'un cevabı neredeyse doğrudur, ancak zararlı yan etkileri olabilir. Bu daha doğrudur:
#myTable tr td:nth-child(1), #myTable th:nth-child(1) {
display: none;
}
CSS (Basamaklı Stil Sayfaları) öznitelikleri tüm alt öğelerine basamaklandırır . Bu , her birinin ilkini gizleyeceği VE tüm çocukların ilk öğesini *:nth-child(1)gizleyeceği anlamına gelir . Herhangi birinizde düğmeler, simgeler, girişler veya seçimler gibi şeyler varsa , ilki gizlenecektir (woops!).tdtr tdtd
Şu anda gizlenecek şeyleriniz olmasa bile , bir tane eklemeniz gerekirse hayal kırıklığınızı yolun aşağısında hayal edin. Gelecekteki halinizi bu şekilde cezalandırmayın, bu hata ayıklamak için bir acı olacak!
Benim cevabım sadece ilk gizler tdve thtüm üzerinde trde #myTablegüvende diğer elemanları tutmak.
Bootstrap insanları .hiddensınıfı kullanır <td>.
Ayrıca, https://developer.mozilla.org/en/docs/Web/HTML/Element/col col öğesini kullanarak bir sütunu gizleyebilirsiniz.
Bir tablodaki ikinci sütunu gizlemek için:
<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 hatayı https://bugs.chromium.org/p/chromium/issues/detail?id=174167 adresinde oylayın.
<style>
.hideFullColumn tr > .hidecol
{
display:none;
}
</style>Tabloda .hideFullColumn ve th içinde .hidecol kullanın. td'ye ayrı ayrı sınıf eklemenize gerek yoktur, çünkü bu sorun olacaktır çünkü indeks her td için akılda tutulmayabilir.
Ayrıca, stili Javascript ile atayarak ve bu stile sahip olmak için belirli bir dizinde td öğesini ayarlayarak programatik olarak ne vs dev'in önerdiğini yapabilirsiniz.
<!doctype html>
<html lang="en">
<head>
<style id="myStyleSheet">
...
</style>
var column = 3;
var styleSheet = document.getElementById("myStyleSheet").sheet;
var rule = "table tr td:nth-child("+ column +"),table th:nth-child("+ column +")
{display: none}";
styleSheet.insertRule(rule);