Wie verstecke ich Spalten in einer HTML-Tabelle?

Ich habe eine Tabelle in ASPX erstellt. Ich möchte eine der Spalten basierend auf der Anforderung ausblenden, aber es gibt kein Attribut wie visible im HTML-Tabellenaufbau. Wie kann ich mein Problem lösen?

Zu diesem Zweck müssen Sie Stylesheet verwenden.

<td style="display:none;">

Du kannst den … benutzen nth-child CSS-Selektor zum Ausblenden einer ganzen Spalte:

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

Dies funktioniert unter der Annahme, dass eine Zelle der Spalte N (sei es a th oder td) ist immer das N-te untergeordnete Element seiner Zeile.

Hier ist eine Demo.

Wenn Sie möchten, dass die Spaltennummer dynamisch ist, können Sie dies mit tun querySelectorAll oder ein Framework mit ähnlicher Funktionalität, wie z jQuery Hier:

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

Demo mit jQuery

(Die jQuery-Lösung funktioniert auch auf Legacy-Browser, die das nicht unterstützen nth-child).

Sie können auch verwenden:

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

Der Unterschied zwischen ihnen, dass “hidden” die Zelle verbirgt, aber den Raum enthält, aber mit “collapse” wird der Raum nicht wie display:none gehalten. Dies ist wichtig, wenn eine ganze Spalte oder Zeile ausgeblendet wird.

Die Antwort von Kos ist fast richtig, kann aber schädliche Nebenwirkungen haben. Das ist richtiger:

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

CSS (Cascading Style Sheets) wird Kaskade Attribute für alle seine Kinder. Das bedeutet, dass *:nth-child(1) wird die erste verstecken td von jedem tr UND verstecke das erste Element von allen td Kinder. Wenn einer von Ihnen td Dinge wie Schaltflächen, Symbole, Eingaben oder Auswahlen haben, wird die erste ausgeblendet (woops!).

Auch wenn du es nicht tust zur Zeit Dinge haben, die versteckt werden, stellen Sie sich Ihre Frustration vor, wenn Sie eine hinzufügen müssen. Bestrafen Sie Ihr zukünftiges Ich nicht so, das wird mühsam zu debuggen sein!

Meine Antwort wird nur die erste verbergen td und th auf alle tr in #myTable Halten Sie Ihre anderen Elemente sicher.

Bootstrap-Leute verwenden .hidden Klasse an <td>.

Sie können eine Spalte auch mit dem Element col ausblenden https://developer.mozilla.org/en/docs/Web/HTML/Element/col

So blenden Sie die zweite Spalte in einer Tabelle aus:

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

Bekannte Probleme: Dies funktioniert nicht in Google Chrome. Bitte stimmen Sie für den Fehler unter https://bugs.chromium.org/p/chromium/issues/detail?id=174167

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

Verwenden Sie .hideFullColumn in der Tabelle und .hidecol in th. Sie müssen die Klasse in td nicht einzeln hinzufügen, da dies ein Problem darstellt, da der Index möglicherweise nicht an jede td denkt.