CSS zum Ausblenden mehrerer Spalten in einer Tabelle

Lesezeit: 3 Minuten

Benutzer-Avatar
Merin Nakarmi

Ich habe eine Tabelle ähnlich der unten abgebildeten auf einer SharePoint-Website. Ich kann die Tabelle nicht ändern, da sie dynamisch generiert wird, aber ich kann externes CSS hinzufügen, um ihren Stil zu überschreiben. Ich muss nur die zweite Spalte anzeigen und die erste, dritte und vierte Spalte ausblenden.

Die Pseudoklasse zum Ausblenden der ersten Spalte ist

table#student tr td:first-child { display: none; }

Bitte helfen Sie mir mit einer Pseudoklasse oder einem anderen Trick, um die dritte und vierte Spalte zu verbergen.

<table id="student">
    <tr>
        <td>Role</td>
        <td>Merin</td>
        <td>Nakarmi</td>
        <td>30</td>
    <tr>
        <td>Role</td>
        <td>Tchelen</td>
        <td>Lilian</td>
        <td>22</td>
    </tr>
    <tr>
        <td>Role</td>
        <td>Suraj</td>
        <td>Shrestha</td>
        <td>31</td>
    </tr>
</table>

Benutzer-Avatar
AlienHoboken

CSS3:

table#student td {
   display: none;
}
table#student td:nth-child(2) {
   display: block;
}

Verwenden nth-child Selektor zum Einblenden des 2 <td> jeder Zeile, wodurch effektiv die 2. Spalte angezeigt wird.

  • Heutzutage wird angezeigt: table-cell; ist angemessener.

    – Fabien Haddadi

    22. Februar 2018 um 4:57 Uhr

  • Leider bricht dies die Verwendung von Tabellen colspan.

    – Dai

    26. Mai 2020 um 8:56 Uhr

  • @Dai Ich hatte genau dieses Problem und eine Lösung, für die der Platz hier zu eng ist.

    – der König2

    3. Oktober 2021 um 15:06 Uhr

Benutzer-Avatar
Aurélien Gasser

Sie können CSS3 verwenden :nth-child() Selektor

td:nth-child(3), td:nth-child(4) {
  display: none
}

jsfiddle hier

Ich bin überrascht, dass niemand die allgemeine Geschwisterauswahl erwähnt hat. (Mehr Infos hier) Wenn Sie nur die zweite Spalte anzeigen müssen, würde ich a anwenden display: none; style auf die erste Zelle und alle Zellen nach der zweiten.

table#student td:first-child,
table#student td:nth-child(2) ~ td {
  display: none;
}
<table id="student">
    <tr>
        <td>Role</td>
        <td>Merin</td>
        <td>Nakarmi</td>
        <td>30</td>
    <tr>
        <td>Role</td>
        <td>Tchelen</td>
        <td>Lilian</td>
        <td>22</td>
    </tr>
    <tr>
        <td>Role</td>
        <td>Suraj</td>
        <td>Shrestha</td>
        <td>31</td>
    </tr>
</table>

Wenn Sie aus irgendeinem Grund IE7 und IE8 unterstützen müssen, können Sie die ersetzen :nth-child() Selektor mit dem benachbarten Geschwisterselektor:

table#student td:first-child,
table#student td + td ~ td {
  display: none;
}

Bitte schön.

Das CSS:

table#student tr td:first-child, table#student tr td:nth-child(3), table#student tr td:nth-child(4)  { display: none; }

FUNKTIONIERENDE DEMO

Benutzer-Avatar
souvik sett

.hideFullColumn tr > .hidecol
{
    display:none;
}

Sie können .hideFullColumn in der Tabelle und .hidecol in dem Tag verwenden, das Sie ausblenden möchten. Sie müssen sich keine Gedanken über td machen, da diese automatisch ausgeblendet werden.

Die Pseudo-Klasse ist in Ordnung, aber wenn Sie 50 Spalten haben und 20 verbergen müssen, müssen Sie “td:nth-child(1),td:nth-child(2),…” 20 Mal wiederholen indem Sie den Index im Auge behalten. Aber in diesem Fall können Sie die Klasse .hidecol beim Erstellen von th hinzufügen, sodass Sie den Index nicht überarbeiten müssen.

Sie können dies versuchen und bitte lassen Sie mich wissen, ob es funktioniert.

  • Verwenden Sie es nicht, da es nur th verbirgt.

    – souvik sett

    8. Mai 2015 um 9:01 Uhr

  • Verwenden Sie es nicht, da es nur th verbirgt.

    – souvik sett

    8. Mai 2015 um 9:01 Uhr

1017720cookie-checkCSS zum Ausblenden mehrerer Spalten in einer Tabelle

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy