Wie verstecke ich Spalten in einer HTML-Tabelle?

93

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

html asp.net html-table user601367
quelle

168

Zu diesem Zweck müssen Sie das Stylesheet verwenden.

<td style="display:none;">

Anuraj
quelle

1

Was ist mit nur der ersten Spalte mit CSS von HTML

Office 302

Wie soll ich dem Stil hinzufügen, wenn ich eine Tabelle mit Javascript createelement (td) erstelle?

Büro 302

1

@ office302 Diesen Stil nur auf den ersten td anwenden? Oder Sie möchten nur CSS verwenden - Dies können Sie so etwas tuntd:first-child { display:none; }

Anuraj

@ Anuraj sollte beachtet werden, dass: Erstes Kind usw. unterstützt werden> IE 11 und Edge, sowieso gut

Vitaliy Terziev

87

Mit dem nth-childCSS-Selektor können Sie eine ganze Spalte ausblenden:

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

Dies funktioniert unter der Annahme, dass eine Zelle der Spalte N (sei es ein thoder td) immer das N-te untergeordnete Element ihrer Zeile ist.

Hier ist eine Demo.

Wenn Sie möchten, dass die Spaltennummer dynamisch ist, können Sie dies mit einem querySelectorAllbeliebigen Framework tun, das ähnliche Funktionen bietet, wie jQueryhier:

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

Demo mit jQuery

(Die jQuery-Lösung funktioniert auch mit älteren Browsern, die dies nicht unterstützen.nth-child )

Kos
quelle

1

Dies kann schädliche Nebenwirkungen haben. Eine verbesserte Lösung finden Sie in meiner Antwort unten .

Rick Smith

@ RickSmith Guter Punkt. Mein Beitrag wurde aktualisiert, um das Problem auf andere Weise zu vermeiden (mithilfe der untergeordneten Auswahl).

Kos

Kinderauswahl ist definitiv besser. Gute Antwort.

Rick Smith

Gute Lösung, aber etwas mehr Rücksicht auf den Colspan-Fall.

Cinoss

30

Sie können auch verwenden:

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

Der Unterschied zwischen ihnen, dass "versteckt" die Zelle verbirgt, aber den Raum enthält, aber beim "Zusammenbruch" wird der Raum nicht wie eine Anzeige gehalten: keine. Dies ist wichtig, wenn eine ganze Spalte oder Zeile ausgeblendet wird.

Dov Miller
quelle

1

Ich habe festgestellt, dass für div-Tags der Zusammenbruch auch den Platz enthält. Für die div-Tags müssten Sie display verwenden: none; um wirklich zusammenzubrechen und den Raum nicht zu halten.

Dov Miller

5

visibility: collapsewurde speziell für das Ein- und Ausblenden von Zellen entwickelt, da bei der Neuberechnung der Zellenbreite / -höhe ein Unterschied zwischen dieser und dieser besteht display:none. Siehe developer.mozilla.org/en-US/docs/Web/CSS/visibility#Values

SteveB

28

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) kaskadiert Attribute für alle untergeordneten Elemente . Dies bedeutet, dass *:nth-child(1)das erste tdvon jedem tr UND das erste Element aller untergeordneten Elemente tdausgeblendet wird. Wenn einer von Ihnen tdSchaltflächen, Symbole, Eingaben oder Auswahlen hat, wird der erste ausgeblendet (woops!).

Auch wenn Sie derzeit keine versteckten Dinge haben, stellen Sie sich Ihre Frustration später vor, wenn Sie eine hinzufügen müssen. Bestrafe dein zukünftiges Selbst nicht so, das wird ein Problem beim Debuggen!

Meine Antwort wird verstecken nur die erste tdund thauf alle trin #myTableIhren anderen Elemente sicher zu halten.

Rick Smith
quelle

10

Bootstrap-Benutzer verwenden .hiddenclass on <td>.

theapache64
quelle

6

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

So verbergen Sie die zweite Spalte in einer Tabelle:

<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 in Google Chrome nicht. Bitte stimmen Sie für den Fehler unter https://bugs.chromium.org/p/chromium/issues/detail?id=174167 ab

Oberst Panik
quelle

2

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

Erweitern Sie das Snippet

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 für jedes td berücksichtigt wird.

Souvik Sett
quelle

1

Sie können auch programmgesteuert tun, was vs dev vorschlägt, indem Sie den Stil mit Javascript zuweisen, indem Sie die Spalten durchlaufen und das td-Element auf einen bestimmten Index setzen, um diesen Stil zu erhalten.

Tamarintech
quelle

0

<!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);

Albert
quelle

2

Hoffe, es wird das Problem lösen, aber bitte fügen Sie eine Erklärung Ihres Codes hinzu, damit der Benutzer ein perfektes Verständnis dafür erhält, was er wirklich will.

Jaimil Patel

Wie verstecke ich Spalten in einer HTML-Tabelle?

Antworten: