Erstellen Sie eine reaktionsschnelle Tabelle in WordPress.

Question

Ich weiß, dass auf diesem Stapel viele Fragen über reaktionsschnelle Tabellen stehen, aber vertraue mir, dass ich alle durchgemacht habe und keine Lösung für mein Problem gefunden habe. Oder vielleicht wusste ich nicht genau, wonach ich suchte. Deshalb muss ich hier eine Frage stellen.

Das Problem ist ziemlich einfach. Ich mache eine WordPress-Seite. Ich mochte die Themenpreis-Tabelle nicht genau, also nahm ich die Herausforderung an, mein eigenes zu machen. Hier ist der Link zu meiner Wordpress-Seite, wo ich diese Tabelle brauche: http://www.desklers.com/uae/undergraduate-packages

Also mein Tisch ist in Ordnung, aber ich habe Probleme, damit es reagiert. Im Folgenden ist die HTML ich in Wordpress im rohen html Widget meiner visuellen Komponisten setzen:

<style type="text/css">  
/*General styles*/ 




/*Features table------------------------------------------------------------*/ 
@media screen and (max-width: 640px) { 
    .features-table { 
     overflow-x: auto; 
     display: block; 
    } 
} 
.features-table 
{ 
font-family:'Open Sans'; 

    margin: 0 auto; 
    border-collapse: separate; 
    border-spacing: 0; 
    text-shadow: 0 1px 0 #fff; 
    color: #2a2a2a; 
    background: #fafafa; 
    background-image: -moz-linear-gradient(top, #fff, #eaeaea, #fff); /* Firefox 3.6 */ 
    background-image: -webkit-gradient(linear,center bottom,center top,from(#fff),color-stop(0.5, #eaeaea),to(#fff)); 
} 

#check { 
color: #26CCA4; 
font-size:20px; 
} 
#cross { 
color: #E74A4A; 
font-size: 20px; 
} 
.features-table td 
{ 
    height: 50px; 
    line-height: 50px; 
    padding: 0 20px; 
    border-bottom: 1px solid #cdcdcd; 
    box-shadow: 0 1px 0 white; 
    -moz-box-shadow: 0 1px 0 white; 
    -webkit-box-shadow: 0 1px 0 white; 
    white-space: nowrap; 
    text-align: center; 
} 

/*Body*/ 
.features-table tbody td 
{ 
    text-align: center; 


} 

.features-table tbody td:first-child 
{ 
    width: auto; 
    text-align: left; 
} 

.features-table td:nth-child(2), .features-table td:nth-child(3), .features-table td:nth-child(4) 
{ 
    background: #DADADA; 
    background: #E3E3E3; 
    border-right: 1px solid white; 
} 


.features-table tr:nth-child(even) 
{ 
    background: #e7f3d4; 
    background: #E3E3E3; 
} 

/*Header*/ 
.features-table thead td 
{ 
    font-family: 'Open Sans'; 
    font-size: 16; 
    color: white; 
    line-height:16px; 
    font-weight:100; 
    font-variant:small-caps; 

    -moz-border-radius-topright: 10px; 
    -moz-border-radius-topleft: 10px; 
    border-top-right-radius: 10px; 
    border-top-left-radius: 10px; 
    border-top: 1px solid #eaeaea; 
} 

.features-table thead td:first-child 
{ 
    border-top: none; 
} 

/*Footer*/ 
.features-table tfoot td 
{ 

    -moz-border-radius-bottomright: 10px; 
    -moz-border-radius-bottomleft: 10px; 
    border-bottom-right-radius: 10px; 
    border-bottom-left-radius: 10px; 
    border-bottom: 1px solid #dadada; 
} 

.features-table tfoot td:first-child 
{ 
    border-bottom: none; 
} 




    </style> 

    <div id="main"> 

     <table class="features-table"> 
       <thead> 
        <tr> 
         <td></td> 
         <td style="background-color:#000000;"><div class="box"> 
    <div class="ribbon"><span>FEATURED</span></div><p style=" color: white; font-size:30px; font-weight:100;"> Unlimited</p></div></td> 
         <td style="background-color:#229BAA;"><p style=" color: white; font-size:30px; font-weight:100;">Premium</p></td> 
         <td style="background-color:#FEFEFE;"><p style=" color: black; font-size:30px; font-weight:100;">Basic</p></td> 
        </tr> 
       </thead> 
       <tfoot> 
        <tr> 
         <td></td> 
         <td><a class="mk-button outline-btn-dark button-562cf9ad35f16 light outline-dimension medium pointed " target="_self" href="http://www.desklers.com/uae/product/undergraduate-admission/"><span style="font-size:15px;">Get This Plan</span></a></td> 
         <td><a class="mk-button outline-btn-dark button-562cf9ad35f16 light outline-dimension medium pointed " target="_self" href="http://www.desklers.com/uae/product/undergraduate-admission/"><span style="font-size:15px;">Get This Plan</span></a></td> 
         <td><a class="mk-button outline-btn-dark button-562cf9ad35f16 light outline-dimension medium pointed " target="_self" href="http://www.desklers.com/uae/product/undergraduate-admission/"><span style="font-size:15px;">Get This Plan</span></a></td> 
        </tr> 
       </tfoot>      
       <tbody> 
        <tr> 
         <td></td> 
         <td id="price" style="background-color:#000000;">$5000</td> 
         <td id="price" style="background-color:#2BC2D5;">$3000</td> 
         <td id="price" style="background-color:#FEFEFE; color:black;">$1500</td> 
        </tr> 
        <tr id="one"> 
         <td>Number of Colleges Universities</td> 
         <td>20</td> 
         <td>10</td> 
         <td>5</td>   
        </tr> 
        <tr> 
         <td>Number of Countries you can apply</td> 
         <td>Unlimited</td> 
         <td>2</td> 
         <td>1</td>   
        </tr> 
        <tr> 
         <td>Money Back Guarantee</td> 
         <td><i class="mk-moon-checkmark" id="check"></i></td> 
         <td><i class="mk-moon-checkmark" id="check"></i></td> 
         <td><i class="mk-icon-remove" id="cross"></i></td> 
        </tr> 
        <tr> 
         <td>High school planning</td> 
         <td><i class="mk-moon-checkmark" id="check"></i></td> 
         <td><i class="mk-icon-remove" id="cross"></i></td> 
         <td><i class="mk-icon-remove" id="cross"></i></td> 
        </tr> 
        <tr> 
         <td>Academic advising and coaching</td> 
         <td><i class="mk-moon-checkmark" id="check"></i></td> 
         <td><i class="mk-icon-remove" id="cross"></i></td> 
         <td><i class="mk-icon-remove" id="cross"></i></td> 
        </tr> 
        <tr> 
         <td>Transcript evaluations</td> 
         <td><i class="mk-moon-checkmark" id="check"></i></td> 
         <td><i class="mk-icon-remove" id="cross"></i></td> 
         <td><i class="mk-icon-remove" id="cross"></i></td> 
        </tr> 
        <tr> 
         <td>Admission Documents Handling</td> 
         <td><i class="mk-moon-checkmark" id="check"></i></td> 
         <td><i class="mk-moon-checkmark" id="check"></i></td> 
         <td><i class="mk-icon-remove" id="cross"></i></td> 
        </tr> 
        <tr> 
         <td>Guidance in SAT, ACT and Subject Tests</td> 
         <td><i class="mk-moon-checkmark" id="check"></i></td> 
         <td><i class="mk-moon-checkmark" id="check"></i></td> 
         <td><i class="mk-icon-remove" id="cross"></i></td> 
        </tr> 
        <tr> 
         <td>SAT, ACT and Subject Tests Preparation and Coaching</td> 
         <td><i class="mk-moon-checkmark" id="check"></i></td> 
         <td><i class="mk-icon-remove" id="cross"></i></td> 
         <td><i class="mk-icon-remove" id="cross"></i></td> 
        </tr> 
        <tr> 
         <td>Athletic Recruitment</td> 
         <td><i class="mk-moon-checkmark" id="check"></i></td> 
         <td><i class="mk-icon-remove" id="cross"></i></td> 
         <td><i class="mk-icon-remove" id="cross"></i></td> 
        </tr> 
        <tr> 
         <td>Guidance in selecting best fit colleges</td> 
         <td><i class="mk-moon-checkmark" id="check"></i></td> 
         <td><i class="mk-moon-checkmark" id="check"></i></td> 
         <td><i class="mk-moon-checkmark" id="check"></i></td> 
        </tr> 
        <tr> 
         <td>Developing and finalizing a college list</td> 
         <td><i class="mk-moon-checkmark" id="check"></i></td> 
         <td><i class="mk-moon-checkmark" id="check"></i></td> 
         <td><i class="mk-icon-remove" id="cross"></i></td> 
        </tr> 
        <tr> 
         <td>Guidance and coaching about how to write winning Application Essays and Supplements</td> 
         <td><i class="mk-moon-checkmark" id="check"></i></td> 
         <td><i class="mk-moon-checkmark" id="check"></i></td> 
         <td><i class="mk-moon-checkmark" id="check"></i></td> 
        </tr> 
        <tr> 
         <td>Proof reading and feedback on College Essays and Supplements</td> 
         <td><i class="mk-moon-checkmark" id="check"></i></td> 
         <td><i class="mk-moon-checkmark" id="check"></i></td> 
         <td><i class="mk-moon-checkmark" id="check"></i></td> 
        </tr> 
        <tr> 
         <td>Discussing, helping, developing and finalizing College Ideas for Essays and Supplements</td> 
         <td><i class="mk-moon-checkmark" id="check"></i></td> 
         <td><i class="mk-icon-remove" id="cross"></i></td> 
         <td><i class="mk-icon-remove" id="cross"></i></td> 
        </tr> 
        <tr> 
         <td>Proof Reading and finalizing Application Essays and Supplements</td> 
         <td><i class="mk-moon-checkmark" id="check"></i></td> 
         <td><i class="mk-icon-remove" id="cross"></i></td> 
         <td><i class="mk-icon-remove" id="cross"></i></td> 
        </tr> 
        <tr> 
         <td>Letters of Recommendation</td> 
         <td><i class="mk-moon-checkmark" id="check"></i></td> 
         <td><i class="mk-moon-checkmark" id="check"></i></td> 
         <td><i class="mk-icon-remove" id="cross"></i></td> 
        </tr> 
        <tr> 
         <td>Leadership opportunities</td> 
         <td><i class="mk-moon-checkmark" id="check"></i></td> 
         <td><i class="mk-moon-checkmark" id="check"></i></td> 
         <td><i class="mk-icon-remove" id="cross"></i></td> 
        </tr> 
        <tr> 
         <td>Summer strategies</td> 
         <td><i class="mk-moon-checkmark" id="check"></i></td> 
         <td><i class="mk-moon-checkmark" id="check"></i></td> 
         <td><i class="mk-icon-remove" id="cross"></i></td> 
        </tr> 
        <tr> 
         <td>Social Work Opportunities</td> 
         <td><i class="mk-moon-checkmark" id="check"></i></td> 
         <td><i class="mk-moon-checkmark" id="check"></i></td> 
         <td><i class="mk-icon-remove" id="cross"></i></td> 
        </tr> 
        <tr> 
         <td>Extra-Curricular activities guidance</td> 
         <td><i class="mk-moon-checkmark" id="check"></i></td> 
         <td><i class="mk-moon-checkmark" id="check"></i></td> 
         <td><i class="mk-icon-remove" id="cross"></i></td> 
        </tr> 
        <tr> 
         <td>Guidance in Scholarship applications</td> 
         <td><i class="mk-moon-checkmark" id="check"></i></td> 
         <td><i class="mk-moon-checkmark" id="check"></i></td> 
         <td><i class="mk-moon-checkmark" id="check"></i></td> 
        </tr> 
        <tr> 
         <td>Assistance in filling scholarship applications</td> 
         <td><i class="mk-moon-checkmark" id="check"></i></td> 
         <td><i class="mk-icon-remove" id="cross"></i></td> 
         <td><i class="mk-icon-remove" id="cross"></i></td> 
        </tr> 
        <tr> 
         <td>Guidance in CSS and other financial aid applications</td> 
         <td><i class="mk-moon-checkmark" id="check"></i></td> 
         <td><i class="mk-moon-checkmark" id="check"></i></td> 
         <td><i class="mk-moon-checkmark" id="check"></i></td> 
        </tr> 
        <tr> 
         <td>Assistance in filling CSS and other financial aid applications</td> 
         <td><i class="mk-moon-checkmark" id="check"></i></td> 
         <td><i class="mk-icon-remove" id="cross"></i></td> 
         <td><i class="mk-icon-remove" id="cross"></i></td> 
        </tr> 
        <tr> 
         <td>Follow-ups</td> 
         <td><i class="mk-moon-checkmark" id="check"></i></td> 
         <td><i class="mk-icon-remove" id="cross"></i></td> 
         <td><i class="mk-icon-remove" id="cross"></i></td> 
        </tr> 
        <tr> 
         <td>Visa Application Guidance and Handling</td> 
         <td><i class="mk-moon-checkmark" id="check"></i></td> 
         <td><i class="mk-icon-remove" id="cross"></i></td> 
         <td><i class="mk-icon-remove" id="cross"></i></td> 
        </tr> 



       </tbody> 
     </table> 
    </div> 
</body> 

Hier ist die JSfiddle zu meinem Code: https://jsfiddle.net/d96q4h3d/

die Medienabfrage verwenden und Einstellen Überlauf -x zu auto, ich konnte meinen Tisch entlang der X-Achse schleppen. Allerdings möchte ich, dass die Tabelle beim Laden der Seite vollständig angezeigt wird, damit der Benutzer die vollständige Tabelle sehen kann. Dann kann er einen bestimmten Teil vergrößern, wenn er ihn genau betrachten möchte.

Jede Hilfe zu dem Problem wäre willkommen. Ich habe viel über Google geforscht, konnte aber keine bestimmte Lösung finden, die erklärt, wie ich die vollständige Tabelle auf der Seite anzeigen kann.

Dank

Answer 1

Zuerst entfernen white-space: nowrap;

jetzt würden Sie die Tabelle max-width machen müssen: (die Größe, die Sie wünschen)

wie im Beispiel des max-width ist 900px: https://jsfiddle.net/d96q4h3d/7/

wenn Sie möchten, dass der Tisch kleiner machen , würden Sie die Größe der <thead> Tags und die „#price“ id wie diese

@media screen and (max-width: 800px) { 
    .features-table thead p { 
    font-size: 20px !important; 
    } 
    #price { 
    font-size: 20px; 
    } 
} 

@media screen and (max-width: 600px) { 
    .features-table thead p { 
    font-size: 15px !important; 
    } 
    #price { 
    font-size: 15px; 
    } 
    .features-table td{ 
    padding: 0px 10px; 
    } 
} 

und immer setzen Sie Ihren @media Bildschirm am Ende der von der Unterseite, nicht an der Spitze haben zu reduzieren!

Answer 2

Haben Sie eine WordPress theme auf der Bootstrap toolkit basiert die Annahme in Betracht gezogen? Wenn Sie das tun, können Sie this sort of pattern to emit your table verwenden, und es wird ohne alle Arten von Problemen reagieren.

<div class="table-responsive"> 
    <table class="table"> 
    your table 
    </table> 
</div> 

Bootstrap ist eine wirklich gute Möglichkeit ansprechende Tabellen und andere Elemente der Benutzeroberfläche zu erhalten; Seine Entwickler haben großartige Arbeit geleistet, um Dinge für alle Arten von Browsern zu debuggen.

Answer 3

Es ist ein hartes Problem, da Tabellen inhärent nicht ansprechen. Es gibt viele verschiedene Wege, um ein gewünschtes Ergebnis zu erzielen. Viele enthalten die Verwendung von Javascript.

Hier ist eine gute Zusammenfassung von verschiedenen Techniken, einschließlich einer wirklich cleveren Pure-CSS (# 8), die mein Favorit ist.

http://exisweb.net/responsive-table-plugins-and-patterns

EDIT:

Da Sie die gesamte Tabelle müssen sichtbar auf mobilen Geräten sein, eine geeignete Lösung für diesen Fall könnte speziell sein:

https://github.com/ghepting/jquery-responsive-tables - DEMO