Responsive-Tabelle - Zeile hinzufügen, wenn der Bildschirm klein ist

Question

Gibt es eine Möglichkeit, diese Art von Code als reaktionsfähig zu machen?

<table class="resp-table"> 
    <tbody> 
    <tr> 
     <td> 
     <img class="alignnone size-full wp-image-3234" src="/" /> 
     <p class="service-desc">XXX</p> 
     </td> 
     <td> 
     <img class="alignnone size-full wp-image-3234" src="/" /> 
     <p class="service-desc">XXX</p> 
     </td> 
     <td> 
     <img class="alignnone size-full wp-image-3234" src="/" /> 
     <p class="service-desc">XXX</p> 
     </td> 
     <td> 
     <img class="alignnone size-full wp-image-3234" src="/" /> 
     <p class="service-desc">XXX</p> 
     </td> 
     <td> 
     <img class="alignnone size-full wp-image-3234" src="/" /> 
     <p class="service-desc">XXX</p> 
     </td> 
     <td> 
     <img class="alignnone size-full wp-image-3234" src="/" /> 
     <p class="service-desc">XXX</p> 
     </td> 
     <td> 
     <img class="alignnone size-full wp-image-3234" src="/" /> 
     <p class="service-desc">XXX</p> 
     </td> 
    </tr> 
    </tbody> 
</table> 

Derzeit zeigt sie als:

COL1|COL2|..|COL7 

Und wenn möglich möchte ich es auf diese Weise immer zeigen, wenn möglich.

Aber wenn sein Handys-Display/kleiner Bildschirm möchte ich es Zeile für Zeile angezeigt werden: nur

COL1 
COL2 
.. 
COL 7 

ist es erreichbar mit CSS?

Answer 1

gibt es zwei Möglichkeiten zu sein.

Lösung 1

ist Mein Vorschlag Gebrauch div statt seine einfache und alternative Lösung der Tabelle.

HTML

<div class="table"> 
    <div class="table-cell"> 
    <img class="alignnone size-full wp-image-3234" src="http://placehold.it/50x50" /> 
    <p class="service-desc">XXX</p> 
    </div> 
    <div class="table-cell"> 
    <img class="alignnone size-full wp-image-3234" src="http://placehold.it/50x50" /> 
    <p class="service-desc">XXX</p> 
    </div> 
    <div class="table-cell"> 
    <img class="alignnone size-full wp-image-3234" src="http://placehold.it/50x50" /> 
    <p class="service-desc">XXX</p> 
    </div> 
    <div class="table-cell"> 
    <img class="alignnone size-full wp-image-3234" src="http://placehold.it/50x50" /> 
    <p class="service-desc">XXX</p> 
    </div> 
    <div class="table-cell"> 
    <img class="alignnone size-full wp-image-3234" src="http://placehold.it/50x50" /> 
    <p class="service-desc">XXX</p> 
    </div> 
    <div class="table-cell"> 
    <img class="alignnone size-full wp-image-3234" src="http://placehold.it/50x50" /> 
    <p class="service-desc">XXX</p> 
    </div> 
    <div class="table-cell"> 
    <img class="alignnone size-full wp-image-3234" src="http://placehold.it/50x50" /> 
    <p class="service-desc">XXX</p> 
    </div> 
</div> 

CSS

.table { 
    display: table; 
    width: 100%; 
} 

.table-cell { 
    display: table-cell; 
    text-align: center; 
    /* width:1% if you want justified table */ 
} 

@media only screen and (max-width: 768px) { 
    .table, 
    .table-cell { 
    display: block 
    } 
} 

Working Fiddle

Lösung 2

Wenn Sie noch Tabelle einfach display:block;-td

hinzufügen verwenden möchten, und für die Tabelle Überschrift Sie Hilfe von pseudo elements

erhalten müssen zum Beispiel data attr (das heißt data-th) in td (d data-th="some heading") hinzufügen; und als fügen Sie die folgenden CSS

@media only screen and (max-width: 768px) { 
    thead { 
    display: none; 
    } 
    td { 
    display: block; 
    } 
    td:before { 
    content: attr(data-th); 
    display: block; 
    font-weight: bold; 
    } 
} 

Working Fiddle

Answer 2

Wenn Sie Bootstrap verwenden, können Sie zwei separate Tabellen schreiben (eine für jeden Zweck) und die Klasse visible-xs für die mobile Version und hidden-xs für die andere hinzufügen.

Sie können dies auch testen, indem Sie einfach die Größe Ihres Browserfensters ändern.

Wenn Sie nur CSS wollen, empfehle ich Ihnen, diese Klassen aus bootstrap.css Datei zu nehmen.

Answer 3

können Sie die table, thead, tbody, th, td, tr zwingen display ed block

/*General Styles */ 
 

 
body, 
 
p { 
 
    margin: 0 
 
} 
 
img { 
 
    max-width: 100% 
 
} 
 
/* Styles for Desktops/Laptops */ 
 

 
table { 
 
    width: 100%; 
 
    border-collapse: collapse; 
 
    table-layout: fixed 
 
} 
 
/* Styles for Mobile */ 
 

 
@media only screen and (max-width: 768px) { 
 
    /* Force table to not be like tables anymore */ 
 
    table, 
 
    thead, 
 
    tbody, 
 
    th, 
 
    td, 
 
    tr { 
 
    display: block; 
 
    } 
 
    /* Hide table headers (but not display: none;, for accessibility) */ 
 
    thead tr { 
 
    position: absolute; 
 
    top: -9999px; 
 
    left: -9999px; 
 
    } 
 
    tr { 
 
    border: 1px solid red 
 
    } 
 
    td { 
 
    /* Behave like a "row" */ 
 
    border: none; 
 
    border-bottom: 1px solid green; 
 
    position: relative; 
 
    padding-left: 50%; 
 
    } 
 
    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; 
 
    } 
 
    /*Label the data */ 
 
    td:nth-of-type(1):before { 
 
    content: "whatever here"; 
 
    } 
 
    td:nth-of-type(2):before { 
 
    content: "whatever here"; 
 
    } 
 
    td:nth-of-type(3):before { 
 
    content: "whatever here; 
 

 
    } 
 
    td:nth-of-type(4):before { 
 
    content: "whatever here"; 
 
    } 
 
    td:nth-of-type(5):before { 
 
    content: "whatever here"; 
 
    } 
 
    td:nth-of-type(6):before { 
 
    content: "whatever here"; 
 
    } 
 
    td:nth-of-type(7):before { 
 
    content: "whatever here"; 
 
    } 
 
}

<table class="resp-table"> 
 
    <tbody> 
 
    <tr> 
 
     <td> 
 
     <img class="alignnone size-full wp-image-3234" src="//dummyimage.com/200x200" /> 
 
     <p class="service-desc">XXX</p> 
 
     </td> 
 
     <td> 
 
     <img class="alignnone size-full wp-image-3234" src="//dummyimage.com/200x200" /> 
 
     <p class="service-desc">XXX</p> 
 
     </td> 
 
     <td> 
 
     <img class="alignnone size-full wp-image-3234" src="//dummyimage.com/200x200" /> 
 
     <p class="service-desc">XXX</p> 
 
     </td> 
 
     <td> 
 
     <img class="alignnone size-full wp-image-3234" src="//dummyimage.com/200x200" /> 
 
     <p class="service-desc">XXX</p> 
 
     </td> 
 
     <td> 
 
     <img class="alignnone size-full wp-image-3234" src="//dummyimage.com/200x200" /> 
 
     <p class="service-desc">XXX</p> 
 
     </td> 
 
     <td> 
 
     <img class="alignnone size-full wp-image-3234" src="//dummyimage.com/200x200" /> 
 
     <p class="service-desc">XXX</p> 
 
     </td> 
 
     <td> 
 
     <img class="alignnone size-full wp-image-3234" src="//dummyimage.com/200x200" /> 
 
     <p class="service-desc">XXX</p> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>