
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>

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.

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

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.
10177200cookie-checkCSS zum Ausblenden mehrerer Spalten in einer Tabelleyes