Erstellen Sie eine ansprechende Tabelle in WordPress.

Lesezeit: 16 Minuten

Ich weiß, dass in diesem Stack bereits viele Fragen zu reaktionsschnellen Tabellen gepostet wurden, aber glauben Sie mir, ich habe sie alle durchgegangen und keine Lösung für mein Problem gefunden. Oder vielleicht wusste ich nicht genau, wonach ich suchte, weshalb ich gezwungen bin, hier eine Frage zu stellen.

Das vorliegende Problem ist ziemlich einfach. Ich mache eine WordPress-Site. Mir gefiel die Theme-Preistabelle nicht gerade, also nahm ich die Herausforderung an, meine eigene zu erstellen. Hier ist der Link zu meiner WordPress-Seite, wo ich diese Tabelle brauche:
http://www.desklers.com/uae/undergraduate-packages

Meine Tabelle ist also in Ordnung, aber ich habe Probleme, sie reaktionsfähig zu machen. Das Folgende ist der HTML-Code, den ich in das Raw-HTML-Widget meines Visual Composer in WordPress einfüge: 

<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/

Mit der Medienabfrage und dem Festlegen von overflow-x auf auto konnte ich meine Tabelle entlang der x-Achse ziehbar machen. Ich möchte jedoch, dass die Tabelle beim Laden der Seite vollständig angezeigt wird, damit der Benutzer die vollständige Tabelle sehen kann. Dann kann er jeden bestimmten Teil heranzoomen, wenn er ihn sich genauer ansehen möchte.

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

Vielen Dank

Benutzer-Avatar
Alexander

Erst entfernen white-space: nowrap;

Jetzt müssten Sie die Tabelle maximal breit machen: (die gewünschte Größe)

Wie im Beispiel beträgt die maximale Breite 900 Pixel: https://jsfiddle.net/d96q4h3d/7/

Wenn Sie den Tisch verkleinern möchten, müssen Sie die Größe des verkleinern <thead> Tags und die “#price”-ID wie folgt

@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 platzieren Sie Ihren @media-Bildschirm immer ganz unten, nicht oben!

  • Dies scheint bei weitem die beste funktionierende Lösung zu sein! Vielen Dank! 😀 Nur ein Problem, das vorgestellte Menüband auf unbegrenzt scheint nicht zusammen mit der Tabelle in der Geige die Größe zu ändern. Habt ihr eine Idee wie ich das beheben kann?

    – Momin Zahid

    27. Oktober 2015 um 11:04 Uhr

  • Sie müssen die Größe nicht ändern, da es bereits klein ist. Meiner Meinung nach müssen Sie es ein wenig verschieben und dem

    -Tag etwas Höhe hinzufügen, damit der Text nicht zu sehr überläuft. Hier sind Sie das Update: jsfiddle.net/d96q4h3d/8 (Sie können es auch aus dem @media-Bildschirm entfernen, indem Sie die 600 Pixel senken, indem Sie anzeigen: keine)

    – Alexander

    27. Oktober 2015 um 12:16 Uhr

Haben Sie darüber nachgedacht, eine zu adoptieren? WordPress-Thema basierend auf Bootstrap-Toolkit?

Wenn Sie das tun, können Sie verwenden diese Art von Muster, um Ihre Tabelle zu emittierenund es reagiert ohne alle Arten von Problemen.

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

Bootstrap ist eine wirklich gute Möglichkeit, responsive Tabellen und andere UI-Elemente zu erhalten; seine Entwickler haben beim Debuggen von Dingen für alle Arten von Browsern großartige Arbeit geleistet.

  • Die Sache ist die, dass ich diese Website für einen Kunden mache. Ich bin selbst noch kein Profi, also experimentiere und lerne ich auf dem Weg! Daher hat der Kunde das Thema für seine Website ausgewählt und dafür bezahlt, also musste ich mitmachen.

    – Momin Zahid

    26. Oktober 2015 um 19:54 Uhr

  • Diese Lösung macht die Tabelle (irgendwie) reaktionsschnell. Nur im Wesentlichen Sätze overflow-x: auto; wodurch Sie die Tabelle horizontal scrollen können.

    – Antti Kuosmanen

    26. Oktober 2015 um 20:04 Uhr

  • Das kann ich schon. Was ich brauche, ist, dass die Tabelle auf einem kleinen Bildschirmgerät in der Größe geändert und vollständig auf dem Bildschirm angezeigt wird, und von dort aus kann der Benutzer die Tabelle beliebig vergrößern. overflow-x ist nicht die Lösung für dieses Problem. Ich muss es ausschalten und einen anderen Weg finden, um die Größe der Tabelle an die Bildschirmgröße anzupassen. :/

    – Momin Zahid

    26. Oktober 2015 um 20:08 Uhr

Benutzer-Avatar
Antti Kuosmanen

Es ist ein schwieriges Problem, da Tabellen von Natur aus nicht reagieren. Es gibt viele verschiedene Möglichkeiten, ein gewünschtes Ergebnis zu erzielen. Viele beinhalten die Verwendung von Javascript.

Hier ist eine gute Zusammenfassung verschiedener Techniken, einschließlich einer wirklich cleveren reinen CSS-Technik (Nr. 8), die mein Favorit ist.

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

BEARBEITEN:

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

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

  • Ich war schon auf dieser Seite. #8 ist nicht effektiv, da selbst das auf einem Gerät mit kleinem Bildschirm nicht die vollständige Tabelle auf dem Bildschirm anzeigt. Da ich mich mit JS nicht so gut auskenne, suche ich nach einer CSS-Lösung. Aber offensichtlich, wenn ich keinen finden kann, muss ich mich für JS entscheiden 🙁

    – Momin Zahid

    26. Oktober 2015 um 20:11 Uhr

  • Wie wäre es dann, wenn Sie die Schriftarten bei kleinen Gerätebreiten einfach mit Medienabfragen skalieren?

    – Antti Kuosmanen

    26. Oktober 2015 um 20:12 Uhr

1370760cookie-checkErstellen Sie eine ansprechende Tabelle in WordPress.

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy

Contact - Terms and Conditions - Privacy Policy