Bootstrap 3 verwenden Wie kann ich Spalten in meiner Tabelle ausblenden?

Ich versuche, Spalten für meine responsive Design zu verstecken, wenn in col-xs und col-sm. Ich habe zuerst versucht, hidden-xs/hidden-sm Klassen zu verwenden, aber das hat nicht funktioniert. Ich habe auch versucht, mit visible-desktop wie hier erwähnt: Twitter Bootstrap Responsive - Show Table Column only on Desktop Bootstrap 3 verwenden Wie kann ich Spalten in meiner Tabelle ausblenden?

Das hat auch nicht funktioniert. Was ist der beste Weg, dies zu tun? Ich mache lieber nicht zwei getrennte Tische und verstecke dann das eine oder das andere.

-Code habe ich versucht, das ist nicht gerade arbeiten:

<table> 
    <thead> 
     <th>Show All the time</th> 
     <th class="hidden-xs hidden-sm">Hide in XS and SM</th> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Show All the time</td> 
      <td class="hidden-xs hidden-sm">Hide in XS and SM</td> 
     </tr> 
    </tbody> 
</table>

Quelle

2013-08-21 daveomcd

Es sieht aus wie in dem Beitrag, den Sie enthalten, 'hidden-Telefon versteckten tablet' verwendet wurde anstelle von' sichtbaren desktop'. Hast du das probiert? – jlars62

Ich habe beide auch ausprobiert, hatte aber trotzdem keinen Einfluss auf meine Tabellen. Vielleicht mache ich sie falsch? '' & ''. – daveomcd

Bootstrap 3? hidden-xs/hidden-sm sollte funktionieren. Können Sie den Code, den Sie ausprobiert haben, posten? – ZimSystem

Der Code sollte gut funktionieren. Bootstrap unterstützt versteckt/zeigt th und td mit seinen ansprechenden Utility-Klassen https://github.com/twbs/bootstrap/blob/master/less/mixins.less#L504:

// Responsive utilities 
// ------------------------- 
// More easily include all the states for responsive-utilities.less. 
.responsive-visibility() { 
    display: block !important; 
    tr& { display: table-row !important; } 
    th&, 
    td& { display: table-cell !important; } 
} 

.responsive-invisibility() { 
    display: none !important; 
    tr& { display: none !important; } 
    th&, 
    td& { display: none !important; } 
}

Der Code in diesem jsFiddle funktioniert: http://jsfiddle.net/A4fQP/

Quelle

2013-08-21 18:52:59

Es scheint, dass Bootstrap 3.2.0 diesen Ansatz verwarf: "Die Klassen .visible-xs, .visible-sm, .visible-md und .visible-lg existieren ebenfalls, ** sind jedoch ab Version 3.2.0 veraltet. ** Sie sind ungefähr gleichwertig.visible - \ * - block, außer mit zusätzlichen Sonderfällen zum Umschalten von

-bezogenen Elementen. "Dies bedeutet, dass es keine offizielle Möglichkeit gibt, die Sichtbarkeit von Tabellenspalten umzuschalten. Wissen Sie, ob das wahr ist? –

Ich laufe vor kurzem in ein ähnliches Problem, arbeitet an einem Tisch unterschiedlich angezeigt wird, je auf Bildschirmgröße. Die Aufgabe für mich bestand darin, eine Spalte auf einem größeren Bildschirm auszublenden und sie auf einem mobilen Gerät anzuzeigen, während drei andere Spalten ausgeblendet wurden (die Spalte "Eins" ist die Summe der Daten in den drei Spalten. Wie die obige Antwort I . eine Medien Abfrage verwendet, aber vorgefertigten Ansichten von Bootstrap der insgesamt entsorgt ich habe Klassen zu den th und td beteiligt Tags

wie diese sehr viel Aussehen:.

.full_view { 
width: 50px; 
    @media(max-width: 768px){ 
    display: none; 
    } 
} 

.small_view { 
    width: 50px; 
    @media(min-width: 768px){ 
    display: none; 
    } 
}

Quelle

2014-02-24 18:32:01 ffej

Es hidden-xs/hidden-sm scheint vor gearbeitet hat seit Die angenommene Antwort hat viele Stimmen, aber das Beispiel funktioniert nicht, wenn ich den Bereich verändere. Was für mich funktioniert, ist die umgekehrte Logik mit visible-md/visible-lg. Ich kann nicht verstehen, warum Bootstrap gemäß der Dokumentation immer noch hidden-xs/hidden-sm unterstützen sollte.

Arbeits Geige: http://jsfiddle.net/h1ep8b4f/

<table> 
    <thead> 
     <th>Show All the time</th> 
     <th class="visible-md visible-lg">Hide in XS and SM</th> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Show All the time</td> 
      <td class="visible-md visible-lg">Hide in XS and SM</td> 
     </tr> 
    </tbody> 
</table>

Quelle

2016-08-10 09:00:59 Ogglas

Verwandte Themen