17.10.2015, 17:03
|
|||
|
|||
Tabelle für Smartphone weniger Zellen Zeigen
ich habe eine Normale Tabelle mit 4 Zeilen und 6 Zellen.
Auf ein Desktop Rechner sieht es gut aus. Aber für Smartphone zu klein, her sind 2 Zellen pro Zeile gut Kann man über eine @media Anweisung eine Tabelle dazu bekommen, statt 6 Zellen nur 2 in einer Reihe zu zeigen? 
|
| Sponsored Links |
|
17.10.2015, 17:36
|
||||
|
||||
|
Zitat:
|
| Sponsored Links |
|
17.10.2015, 17:47
|
|||
|
|||
|
Hallo
Zitat:
Die Frage deutet aber auch stark darauf hin, dass die Tabelle zum Layouten mißbraucht werden soll - keine gute Idee. Gruss MrMurphy
|
|
17.10.2015, 20:43
|
|||
|
|||
|
Es handelt sich um 2X6 Checkboxen in ein Fragebogen
<table> <tr> <td>X1</td><td>X2</td><td>X3</td><td>X4</td><td>x5</td><td>x6</td> </tr> <tr> <td>X7</td><td>X8</td><td>X9</td><td>X10</td><td>x11</td><td>x12</td> </tr> </table> wie bekomme ich die Tabelle dazu, das die auf dem Handy so angezeigt werden <table> <tr><td>X1</td><td>X2</td></tr> <tr><td>X3</td><td>X4</td></tr> <tr><td>X5</td><td>X6</td></tr> <tr><td>X7</td><td>X8</td></tr> .. bis x12 </table> Also immer 2 Zellen statt 6 Zellen. Habe ich eben mal Google nach nth-child gefragt, bis auf jede 2/3 Zeilen umfärben nichts gefunden. Geändert von seerose (17.10.2015 um 20:51 Uhr)
|
|
17.10.2015, 21:08
|
||||
|
||||
|
Zitat:
Nachtrag: Mein Fehler - Du willst keine Spalten ausblenden, sondern die Tabelle umgruppieren, das geht natürlich nicht. In dem Fall hat Murphy recht, eine Tabelle ist das falsche Element. Geändert von protonenbeschleuniger (17.10.2015 um 21:12 Uhr)
|
|
18.10.2015, 14:23
|
|||
|
|||
|
Checkbox gruppieren in einer Reihe
Hallo protonenbeschleuniger,
vielen Dank für den Hinweis das man keine Tabelle umgruppieren kann, glaube das würde mit js gehen, aber Tabellen sind auch keine gute Idee gewesen, dadurch hat man aber schnell alle Label in einer Reihe bekommen. Hier die Lösung ohne Tabellen, alle Ch-Boxen und Labels sind in einer Reihe zentriert. HTML-Code:
#checkboxes ul{
margin: 0px;
list-style: none;
float: left;
margin-left:12px;
border:0px solid;
width:140px;
}
#checkboxes li{
font-size:13px;
margin-left:-24px;
}
<div id="checkboxes" >
<ul >
<li ><input type="checkbox"> checkbox 1</li>
<li><input type="checkbox"> checkbox 2</li>
</ul>
<ul>
<li><input type="checkbox"> checkbox 3</li>
<li><input type="checkbox"> checkbox 4</li>
</ul><ul>
<li><input type="checkbox"> checkbox 5</li>
<li><input type="checkbox"> checkbox 6</li>
</ul><ul>
<li><input type="checkbox"> checkbox 7</li>
<li><input type="checkbox"> checkbox 8</li>
</ul><ul >
<li><input type="checkbox"> checkbox 9</li>
<li><input type="checkbox"> checkbox 10</li>
</ul><ul >
<li><input type="checkbox"> checkbox 11</li>
<li><input type="checkbox"> checkbox 12</li>
</ul>
</div>
<br style='clear:both'>
|
|
18.10.2015, 15:28
|
|||
|
|||
|
Hallo
geschickter wäre Code:
ul.checkboxes {
overflow: hidden;
padding: 10px;
border: 0;
margin: 20px;
}
ul.checkboxes li {
float: left;
list-style-type: none;
width: 140px;
margin: 5px;
}
ul.checkboxes li:nth-child(2n+3) {
clear: both;
}
<ul class="checkboxes" >
<li><input type="checkbox">checkbox 1</li>
<li><input type="checkbox">checkbox 2</li>
<li><input type="checkbox">checkbox 3</li>
<li><input type="checkbox">checkbox 4</li>
<li><input type="checkbox">checkbox 5</li>
<li><input type="checkbox">checkbox 6</li>
<li><input type="checkbox">checkbox 7</li>
<li><input type="checkbox">checkbox 8</li>
<li><input type="checkbox">checkbox 9</li>
<li><input type="checkbox">checkbox 10</li>
<li><input type="checkbox">checkbox 11</li>
<li><input type="checkbox">checkbox 12</li>
</ul>
MrMurphy Geändert von MrMurphy (18.10.2015 um 15:31 Uhr)
|
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| Tabelle auf Smartphone | Manfred62 | CSS | 7 | 27.10.2013 18:37 |
| Tabelle Rahmen schwarz, Zellen grau | Daniel86 | CSS | 2 | 29.09.2011 23:05 |
| 1px Raster zwischen Zellen einer Tabelle | Cu Chullain | CSS | 1 | 07.07.2011 22:23 |
| CSS Tabelle - Zellen verbinden | Praktikant | CSS | 5 | 16.08.2010 15:55 |
| Tabelle: Inhalt von Zellen vertikal ausrichten | Calypso | CSS | 1 | 11.11.2006 14:50 |
Linear-Darstellung
