Ist es möglich, Tabellenzeilen vertikal mit CSS anzuzeigen?

Question

Ich habe eine Tabelle wie folgt aus:

<table> 
 
    <thead> 
 
    <tr> 
 
     <th>Name</th> 
 
     <th>Phone no.</th> 
 
     <th>Address</th> 
 
     <th>Wealth</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <th>John Doe</th> 
 
     <td>0</td> 
 
     <td>Morgue St. 21</td> 
 
     <td>$100,000</td> 
 
    </tr><tr> 
 
     <th>Mary Sue</th> 
 
     <td>00987654321</td> 
 
     <td>Impossible St. 12</td> 
 
     <td>$999,999,999,999,999</td> 
 
    </tr><tr> 
 
     <th>Cpt. Kirk</th> 
 
     <td>00999999999</td> 
 
     <td>Enterprise St. 22</td> 
 
     <td>$100,000,000</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Nun, diese Tabelle ziemlich breit ist. Und jetzt muss ich ein Stylesheet erstellen, das die Website für die Betrachtung auf einem schmalen Bildschirm wie einem Mobiltelefon geeignet macht. Also muss ich mit diesem großen Tisch etwas tun.

Ich dachte, wenn diese Tabelle vertikal, nicht horizontal angezeigt werden könnte. Genauer gesagt, dachte ich, wenn es mehr wie diese angezeigt werden könnte: Ich konnte

<ul> 
 
    <li><strong>John Doe:</strong> 
 
    <ul> 
 
     <li><em>Phone no.:</em> 0</li> 
 
     <li><em>Address:</em> Morgue St. 21</li> 
 
     <li><em>Wealth:</em> $100,000</li> 
 
    </ul> 
 
    </li><li><strong>Mary Sue:</strong> 
 
    <ul> 
 
     <li><em>Phone no.:</em> 00987654321</li> 
 
     <li><em>Address:</em> Impossible St. 12</li> 
 
     <li><em>Wealth:</em> $999,999,999,999,999</li> 
 
    </ul> 
 
    </li><li><strong>Cpt. Kirk:</strong> 
 
    <ul> 
 
     <li><em>Phone no.:</em> 00999999999</li> 
 
     <li><em>Address:</em> Enterprise St. 22</li> 
 
     <li><em>Wealth:</em> $100,000,000 </li> 
 
    </ul> 
 
    </li> 
 
</ul>

nun sicher ein Javascript machen, die die Tabelle Code aus dem ersten Code-Schnipsel in die Liste Code umwandeln würden aus das zweite Snippet. Aber ich frage mich, ob das notwendig ist? Ist es möglich, ein CSS-Stylesheet zu erstellen, das, wenn es an den Tabellencode aus dem ersten Snippet angehängt wird, es wie das zweite Snippet aussehen lässt?

Answer 1

Es könnte bessere Möglichkeiten, dies zu tun, aber hier ist eine Lösung, um das Ziel zu erreichen:

table thead{ 
    display:none; 
}  
table tbody tr th{ 
    display:block; 
    text-align: left; 
} 
table tbody tr td{ 
display:block; 
margin-left:20px; 
} 
table tbody tr th::before{ 
content:"• "; 
} 
table tbody tr td::before{ 
content:"◊ "; 
} 

finden ein funktionierendes Beispiel: https://jsfiddle.net/ktnurvfr/

Answer 2

Sicher, können Sie mit media queries spielen und die ändern display des table:

See this fiddle

@media(max-width: 640px){ 
    table, table td, table tr, table th { display: block; text-align: left; } 
    table th, table td { margin: 0; padding-left: 25px; } 
    table td { margin-left: 40px;list-style: square; display: list-item; padding-left: 0; } 
    table thead { display: none; } 
} 

Answer 3

td, th { 
 
    text-align: left; 
 
    display: block; 
 
    float: left; 
 
    width: 100%; 
 
} 
 

 
thead { 
 
    display: none; 
 
}

<table> 
 
    <thead> 
 
    <tr> 
 
     <th>Name</th> 
 
     <th>Phone no.</th> 
 
     <th>Address</th> 
 
     <th>Wealth</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <th>John Doe</th> 
 
     <td>0</td> 
 
     <td>Morgue St. 21</td> 
 
     <td>$100,000</td> 
 
    </tr><tr> 
 
     <th>Mary Sue</th> 
 
     <td>00987654321</td> 
 
     <td>Impossible St. 12</td> 
 
     <td>$999,999,999,999,999</td> 
 
    </tr><tr> 
 
     <th>Cpt. Kirk</th> 
 
     <td>00999999999</td> 
 
     <td>Enterprise St. 22</td> 
 
     <td>$100,000,000</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Hier ist eine Art und Weise, ohne die <thead> Elemente, aber man konnte versteckte Elemente vor jeder Person erstellen, zum Beispiel <span class="hidden">Name:</span> Cpt. Kirk und aktivieren Sie dann alle versteckten Elemente mit Medienabfragen. Nicht die eleganteste Lösung, ich würde wahrscheinlich JS dafür bevorzugen.

Answer 4

Sie können die Tabellenelemente ändern, um Block anzuzeigen und sie zu zwingen, wie Blockelemente zu handeln, fügen Sie einfach diese Klasse zu Ihrer Tabelle hinzu.

.vertical-table thead{ 
display:none; 
} 
.vertical-table tr, .vertical-table th, .vertical-table td{ 
display:block; 
width:100%; 
} 

.vertical-table thead{ 
 
display:none; 
 
} 
 
.vertical-table tr, .vertical-table th, .vertical-table td{ 
 
display:block; 
 
width:100%; 
 
}

<table class="vertical-table"> 
 
    <thead> 
 
    <tr> 
 
     <th>Name</th> 
 
     <th>Phone no.</th> 
 
     <th>Address</th> 
 
     <th>Wealth</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <th>John Doe</th> 
 
     <td>0</td> 
 
     <td>Morgue St. 21</td> 
 
     <td>$100,000</td> 
 
    </tr><tr> 
 
     <th>Mary Sue</th> 
 
     <td>00987654321</td> 
 
     <td>Impossible St. 12</td> 
 
     <td>$999,999,999,999,999</td> 
 
    </tr><tr> 
 
     <th>Cpt. Kirk</th> 
 
     <td>00999999999</td> 
 
     <td>Enterprise St. 22</td> 
 
     <td>$100,000,000</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 5

hatte ich das gleiche Problem. Während meiner Suche traf ich diese elegante Lösung von sergiopinnaprato: http://bootsnipp.com/snippets/featured/no-more-tables-respsonsive-table

Auf kleineren Bildschirmen ändert sich die Tabelle in eine einzige Spalte.Sehr lesbar Lösung nur HTML und CSS Code:

HTML:

<div id="no-more-tables"> 
     <table class="col-md-12 table-bordered table-striped table-condensed cf"> 
      <thead class="cf"> 
       <tr> 
        <th>Code</th> 
        <th>Company</th> 
        <th class="numeric">Price</th> 
        <th class="numeric">Change</th> 
        <th class="numeric">Change %</th> 
        <th class="numeric">Open</th> 
        <th class="numeric">High</th> 
        <th class="numeric">Low</th> 
        <th class="numeric">Volume</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td data-title="Code">AAC</td> 
        <td data-title="Company">AUSTRALIAN AGRICULTURAL COMPANY LIMITED.</td> 
        <td data-title="Price" class="numeric">$1.38</td> 
        <td data-title="Change" class="numeric">-0.01</td> 
        <td data-title="Change %" class="numeric">-0.36%</td> 
        <td data-title="Open" class="numeric">$1.39</td> 
        <td data-title="High" class="numeric">$1.39</td> 
        <td data-title="Low" class="numeric">$1.38</td> 
        <td data-title="Volume" class="numeric">9,395</td> 
       </tr> 
       <tr> 
        <td data-title="Code">AAD</td> 
        <td data-title="Company">ARDENT LEISURE GROUP</td> 
        <td data-title="Price" class="numeric">$1.15</td> 
        <td data-title="Change" class="numeric">+0.02</td> 
        <td data-title="Change %" class="numeric">1.32%</td> 
        <td data-title="Open" class="numeric">$1.14</td> 
        <td data-title="High" class="numeric">$1.15</td> 
        <td data-title="Low" class="numeric">$1.13</td> 
        <td data-title="Volume" class="numeric">56,431</td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 

CSS:

@media only screen and (max-width: 800px) { 

/* Force table to not be like tables anymore */ 
#no-more-tables table, 
#no-more-tables thead, 
#no-more-tables tbody, 
#no-more-tables th, 
#no-more-tables td, 
#no-more-tables tr { 
    display: block; 
} 

/* Hide table headers (but not display: none;, for accessibility) */ 
#no-more-tables thead tr { 
    position: absolute; 
    top: -9999px; 
    left: -9999px; 
} 

#no-more-tables tr { border: 1px solid #ccc; } 

#no-more-tables td { 
    /* Behave like a "row" */ 
    border: none; 
    border-bottom: 1px solid #eee; 
    position: relative; 
    padding-left: 50%; 
    white-space: normal; 
    text-align:left; 
} 

#no-more-tables td:before { 
    /* Now like a table header */ 
    position: absolute; 
    /* Top/left values mimic padding */ 
    top: 6px; 
    left: 6px; 
    width: 45%; 
    padding-right: 10px; 
    white-space: nowrap; 
    text-align:left; 
    font-weight: bold; 
} 

/* 
Label the data 
*/ 
#no-more-tables td:before { content: attr(data-title); } 
} 

hoffe, das hilft!

Answer 6

können Sie diesen Code verwenden:

@media(max-width: 640px){ 
table, table td, table tr, table th { display: block; text-align: left; } 
table th, table td { margin: 0; padding-left: 25px; } 
table td { margin-left: 40px;list-style: square; display: list-item; padding-left: 0; } 
table thead { display: none; } 
} 

i Arbeit sein wird.