zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > Barrierefreiheit
Seite neu laden Tabelle für Smartphone weniger Zellen Zeigen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 17.10.2015, 18:03
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.10.2014
Beiträge: 88
seerose befindet sich auf einem aufstrebenden Ast
Standard 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?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 17.10.2015, 18:36
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von seerose Beitrag anzeigen
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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 17.10.2015, 18:47
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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
Mit Zitat antworten
  #4 (permalink)  
Alt 17.10.2015, 21:43
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.10.2014
Beiträge: 88
seerose befindet sich auf einem aufstrebenden Ast
Standard

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 21:51 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 17.10.2015, 22:08
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von seerose Beitrag anzeigen
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.

Geändert von protonenbeschleuniger (17.10.2015 um 22:12 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 18.10.2015, 15:23
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.10.2014
Beiträge: 88
seerose befindet sich auf einem aufstrebenden Ast
Standard 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'>
Mit Zitat antworten
  #7 (permalink)  
Alt 18.10.2015, 16:28
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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

Geändert von MrMurphy (18.10.2015 um 16:31 Uhr)
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Tabelle auf Smartphone Manfred62 CSS 7 27.10.2013 19:37
Tabelle Rahmen schwarz, Zellen grau Daniel86 CSS 2 30.09.2011 00:05
1px Raster zwischen Zellen einer Tabelle Cu Chullain CSS 1 07.07.2011 23:23
CSS Tabelle - Zellen verbinden Praktikant CSS 5 16.08.2010 16:55
Tabelle: Inhalt von Zellen vertikal ausrichten Calypso CSS 1 11.11.2006 15:50


Alle Zeitangaben in WEZ +2. Es ist jetzt 01:14 Uhr.