Force HTML-Tabelle in einzelne gestapelte Spalte mit nur CSS und kein Javascript

Ich erstelle eine HTML-Vorlage, die eine Tabelle umhüllt, die zum Auslegen eines Formulars verwendet wird. Ich habe die volle Kontrolle über den HTML-Code, der die Tabelle und nicht die Tabelle selbst umschließt. Die Tabelle wird in meine Vorlage eingefügt, bevor sie an den Client gesendet wird. Ich habe keinerlei Kontrolle darüber. Das einzige, was ich kontrollieren kann, ist der HTML-Code, der die Tabelle und alle CSS umschließt.Force HTML-Tabelle in einzelne gestapelte Spalte mit nur CSS und kein Javascript

Die Tabelle ist eine zweispaltige Tabelle, die wie folgt aussieht:

<table> 
    <tr> 
    <td>Column 1</td> 
    <td>Column 2</td> 
    </tr> 
    <tr> 
    <td>this is column 1</td> 
    <td>this is column 2</td> 
    </tr> 
</table> 

------------------------------------------------- 
|Column 1     |Column 2   | 
------------------------------------------------- 
|this is column 1   |this is column 2 | 
-------------------------------------------------

Allerdings würde ich es vorziehen, wenn wir es als eine gestapelte Säule zeigen konnte.

---------------------------- 
|Column 1     | 
----------------------------- 
|this is column 1   | 
----------------------------- 
|Column 2     | 
----------------------------- 
| this is column 2   | 
-----------------------------

Gibt es eine Möglichkeit, dies nur mit CSS, kein Javascript zu erreichen.

Quelle

2012-09-10 KJF

Haben Sie einen Code, den Sie schon einmal ausprobiert haben? – Kyle

Wickeln Sie es in eine div anstelle von Tabelle, wenn Sie die Wrapping-HTML ändern können - viel einfacher und solider als eine Tabelle dafür verwenden. – easwee

@KJF as easwee schlägt vor, mit div wird besser sein als Tabelle. – freebird

Nein, dies ist nicht vernünftig möglich, ohne die Markup zu ändern. Tabellen in HTML sind als Zeilen strukturiert, nicht als Spalten. Im Beispiel geben Sie Sie Nachbestellung den Inhalt:

Original-Reihenfolge:
Column 1 -> Column 2 -> this-is-col-1 -> this-is-col-2

Neue Bestellung:
Column 1 -> this-is-col-1 -> Column 2 -> this-is-col-2

Warum habe ich gesagt „nicht vernünftig möglich "? Nun, mit absoluter Positionierung und ähnlichen Techniken können Sie vielleicht das Layout, das Sie wollen, zusammen hacken - aber es gibt eine Welt voller CSS-Verletzungen, da ich nicht erwarte, dass diese Herangehensweise auf einer richtigen Seite gut funktioniert.

Zusätzlicher Hinweis: Zum „Nachbestellung“ Problem hinzuzufügen, etwas, das ein wenig leichter sein kann, dieses Layout zu erreichen wäre, wo die Reihenfolge gleich bleibt:

---------------------------- 
|Column 1     | 
----------------------------- 
|Column 2     | 
----------------------------- 
|this is column 1   | 
----------------------------- 
| this is column 2   | 
-----------------------------

Aber Das ist offensichtlich nicht das, was du willst.

Quelle

2012-09-10 09:13:43 Jeroen

versuchen, dies zu Ihnen das Hinzufügen CSS:

td { 
    display: table-row; 
}

Beifall.

Quelle

2012-09-10 09:23:47 George

Während dies eine saubere Lösung ist, wird IE es nicht anzeigen. – easwee

Nod. Es funktioniert nicht auf ie 7 oder niedriger. :) – George

Nop - funktioniert nicht in jedem IE - auch 9. – easwee

Einfach; Nein. Sie können eine Zeile nicht umwandeln, indem Sie eine 2-Spalten-Tabelle ohne JavaScript in eine 1-Spalten-Tabelle umwandeln.
Erteilen Sie den Codierern der Tabelle entweder die Anweisung, die Tabelle auf diese Weise zu erstellen, oder verwenden Sie einfach JavaScript, um die Tabelle neu zu strukturieren.

Quelle

2012-09-10 09:32:31

Ganz zu schweigen von schlechter Codierung, wenn sie eine Tabelle benutzten. – easwee

Sie können etwas ähnliches erreichen, indem Sie display:block; verwenden.

Sehen Sie diese Geige: http://jsfiddle.net/R53KH/

Quelle

2012-09-10 09:43:52 starbeamrainbowlabs

einzige Lösung I denken kann, Ihr Markup zu ändern. Ich würde es so ändern, dass ich eine Spalte nehme und sie als Zeile in Markup schreibe.Hier ist eine Geige, die ich erstellt habe: http://jsfiddle.net/MHsxU/

Quelle

2012-09-10 09:44:28

Immer noch Probleme und in Chrome?

Für diejenigen, die immer noch Probleme (wie ich) haben, überprüfen Sie <!DOCTYPE html> im Kopf Ihres Dokuments. Wenn Sie nicht Chrome scheint alles zu ignorieren alles, was Sie hinzufügen und behalten display: table-cell.

Quelle

2016-02-11 17:17:38 timtom

Ich wurde vor kurzem mit einem ähnlichen Problem konfrontiert & scheint eine gute Lösung gefunden zu haben. Tabellen haben einen schlechten Ruf aufgrund häufigen Missbrauchs, sind aber in der Tat die schlankste Option, wenn ein Raster von Daten in einem Ansichtsfenster mit variabler Breite angezeigt werden muss.

Die Antwort auf die ursprüngliche Frage ist immer noch nein. Um dieses Problem ohne JavaScript zu lösen, muss ein in der Lage sein, das Tabellen-Markup zu bearbeiten.

Tische können aussehen ... okay ... wenn sie weit ausgestreckt sind, aber sie sehen einfach schrecklich aus, wenn sie zerquetscht werden. "Responsive" -Tabellen sind nur durch Hinzufügen kontextabhängigen Markups zu jeder Zelle möglich (z. B. span.label & span.data Elemente). Wir können diese neue überflüssige Ausgabe einfach ausblenden & nur anzeigen, wenn in einem responsiven Ansichtszustand.

table.responsive td .label { 
 
    display: none; 
 
}

<table class="responsive"> 
 
    <thead> 
 
     <tr> 
 
      <th>Column Foo</th> 
 
      <th>Column Bar</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
      <td><span class="label">Column Foo</span><span class="data">Baz</span></td> 
 
      <td><span class="label">Column Bar</span><span class="data">Qux</span></td> 
 
     </tr> 
 
    </tbody> 
 
</table>

Wenn sie in einem reaktionsAnsichtsZustand, Ausblenden des thead Element & zeigen die .label Elemente.

table.responsive { 
 
    width: 100%; 
 
} 
 
table.responsive td .label { 
 
    display: none; 
 
} 
 

 
table.responsive th { 
 
    background-color: #ddd; 
 
} 
 

 
table.second { 
 
    margin-top: 5em; 
 
} 
 

 
@media screen and (max-width:640px) { 
 
    table.responsive thead { 
 
    display: none; 
 
    } 
 
    table.responsive tbody th, 
 
    table.responsive tbody td { 
 
    display: block; 
 
    } 
 

 
    table.responsive td span { 
 
    display: block; 
 
    } 
 
    table.responsive td .label { 
 
    background-color: #ddd; 
 
    font-weight: bold; 
 
    text-align: center; 
 
    } 
 
}

Ich habe eine repo geschaffen, die die Lösung näher abdeckt. Klicken Sie auf here, damit es funktioniert.

Quelle

2016-08-27 06:13:35 yesnoio

Force HTML-Tabelle in einzelne gestapelte Spalte mit nur CSS und kein Javascript

Antwort

Verwandte Themen