वर्डप्रेस के भीतर एक उत्तरदायी तालिका बनाओ।

Question

मुझे पता है कि उत्तरदायी तालिकाओं के बारे में इस ढेर पर पहले से ही बहुत से प्रश्न पोस्ट किए गए हैं लेकिन मेरा विश्वास करो कि मैं उन सभी के माध्यम से हूं और मुझे अपनी समस्या का समाधान नहीं मिला है। या शायद मुझे पता नहीं था कि मैं क्या देख रहा था, यही कारण है कि मुझे यहां एक प्रश्न पूछने के लिए मजबूर होना पड़ा।

हाथ में समस्या बहुत सरल है। मैं एक WordPress साइट बना रहा हूँ। मुझे थीम मूल्य निर्धारण तालिका बिल्कुल पसंद नहीं आया, इसलिए मैंने अपना खुद का चयन करने के लिए चुनौती उठाई। http://www.desklers.com/uae/undergraduate-packages

तो मेरी मेज ठीक है, लेकिन मैं मुसीबत यह उत्तरदायी बनाने आ रही है: यहाँ मेरी Wordpress पेज के लिए लिंक मैं कहाँ इस तालिका की जरूरत है।

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

यहाँ JSfiddle मेरी कोड के लिए है:: https://jsfiddle.net/d96q4h3d/

मीडिया क्वेरी का उपयोग, और अतिप्रवाह निम्नलिखित एचटीएमएल मैं विजेट मेरी दृश्य संगीतकार के कच्चे एचटीएमएल में डाल रहा हूं वर्डप्रेस में है ऑटो से एक्स, मैं एक्स-अक्ष के साथ अपनी टेबल ड्रैग-सक्षम बनाने में सक्षम हूं। हालांकि, जब पेज लोड होता है तो तालिका पूरी तरह प्रकट हो जाती है ताकि उपयोगकर्ता पूर्ण तालिका देख सके। फिर वह किसी भी विशेष भाग में ज़ूम कर सकता है अगर वह इसे बारीकी से देखना चाहता है।

समस्या पर कोई भी मदद की सराहना की जाएगी। मैंने Google पर बहुत सारे शोध किए हैं लेकिन एक विशेष समाधान खोजने में असमर्थ रहे हैं जो बताता है कि मैं पृष्ठ पर पूरी तालिका कैसे देख सकता हूं।

धन्यवाद

Answer 1

पहले हटाएं white-space: nowrap;

(आकार है कि आप चाहते हैं)

तरह के उदाहरण में अधिकतम-चौड़ाई 900px है:

अब आप तालिका अधिकतम-चौड़ाई बनाने के लिए होता है https://jsfiddle.net/d96q4h3d/7/

आप तालिका छोटा करने के लिए करना चाहते हैं आप इस

@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; 
    } 
} 

तरह <thead> टैग के आकार, और "#price" आईडी को कम करने और हमेशा की तरह, नीचे के के अंत में अपने @media स्क्रीन डाल शीर्ष पर नहीं करने के लिए होगा!

Answer 2

आप एक WordPress themeBootstrap toolkit के आधार पर गोद लेने पर विचार किया है?

आपको लगता है कि आप this sort of pattern to emit your table उपयोग कर सकते हैं, और यह बाधाओं के सभी प्रकार के बिना उत्तरदायी हो जाएगा करते हैं।

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

बूटस्ट्रैप उत्तरदायी तालिकाओं और अन्य UI तत्वों को प्राप्त करने का एक बहुत अच्छा तरीका है; इसके डेवलपर्स ने सभी प्रकार के ब्राउज़रों के लिए एक बड़ी नौकरी डिबगिंग चीजें की हैं।

Answer 3

यह एक कठिन समस्या है के बाद से टेबल स्वाभाविक उत्तरदायी नहीं हैं। वांछित परिणाम प्राप्त करने के कई अलग-अलग तरीके हैं। कई जावास्क्रिप्ट का उपयोग शामिल हैं।

यहाँ एक बहुत चालाक शुद्ध सीएसएस एक (# 8) है, जो मेरी पसंदीदा है सहित विभिन्न तकनीकों, का एक अच्छा दौर-अप है।

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

संपादित करें:

जब से तुम पूरे मेज की जरूरत मोबाइल उपकरणों पर दिखाई दे सकता है, इस मामले के लिए एक उपयुक्त समाधान विशेष रूप से हो सकता है:

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