XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   Barrierefreiheit (http://xhtmlforum.de/forumdisplay.php?f=78)
-   -   Tabelle für Smartphone weniger Zellen Zeigen (http://xhtmlforum.de/showthread.php?t=72398)

seerose 17.10.2015 18: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?

protonenbeschleuniger 17.10.2015 18:36

Zitat:

Zitat von seerose (Beitrag 546489)
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?

Ja, mit nth-child

MrMurphy 17.10.2015 18:47

Hallo

Zitat:

Kann man über eine @media Anweisung eine Tabelle dazu bekommen, statt 6 Zellen nur 2 in einer Reihe zu zeigen?
Sollen die anderen 4 Spalten auch 2-spaltig darunter auch angezeigt werden? Dann eher nicht.

Die Frage deutet aber auch stark darauf hin, dass die Tabelle zum Layouten mißbraucht werden soll - keine gute Idee.

Gruss

MrMurphy

seerose 17.10.2015 21: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.

protonenbeschleuniger 17.10.2015 22:08

Zitat:

Zitat von seerose (Beitrag 546492)
Habe ich eben mal Google nach nth-child gefragt, bis auf jede 2/3 Zeilen umfärben nichts gefunden.

nth-child() hat zwei Parameter, der erste ist für die Wiedeholung, der zweite für's Offset. Du willst alle (1n) ab dem 5. Element ausblenden.


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.

seerose 18.10.2015 15: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'>


MrMurphy 18.10.2015 16: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>

Gruss

MrMurphy


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:00 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023