Tạo bảng đáp ứng trong WordPress.

Question

Tôi biết có rất nhiều câu hỏi đã được đăng trên ngăn xếp này về các bảng đáp ứng nhưng tôi tin rằng tôi đã vượt qua tất cả chúng và chưa tìm thấy giải pháp cho vấn đề của tôi. Hoặc có lẽ tôi không biết chính xác những gì tôi đang tìm kiếm, đó là lý do tại sao tôi buộc phải hỏi một câu hỏi ở đây.

Vấn đề ở bàn tay khá đơn giản. Tôi đang tạo một trang wordpress. Tôi đã không chính xác như bảng giá chủ đề vì vậy tôi đã lên những thách thức để làm của riêng tôi. Đây là liên kết đến trang Wordpress của tôi nơi tôi cần bảng này: http://www.desklers.com/uae/undergraduate-packages

Vì vậy, bảng của tôi là tốt nhưng tôi đang gặp khó khăn khi làm cho nó đáp ứng. Sau đây là html Tôi đưa vào widget html liệu của nhà soạn nhạc thị giác của tôi trong 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> 

Đây là JSfiddle để mã của tôi: https://jsfiddle.net/d96q4h3d/

Sử dụng truy vấn phương tiện truyền thông, và thiết lập tràn -x để tự động, tôi đã có thể làm cho bảng của tôi có thể kéo dọc theo trục x. Tuy nhiên tôi muốn bảng xuất hiện đầy đủ khi trang tải để người dùng có thể xem toàn bộ bảng. Sau đó, anh ấy có thể phóng to bất kỳ phần cụ thể nào nếu anh ấy muốn xem xét kỹ.

Bất kỳ trợ giúp nào về vấn đề sẽ được đánh giá cao. Tôi đã thực hiện rất nhiều nghiên cứu trên google nhưng không thể tìm thấy giải pháp cụ thể giải thích cách tôi có thể xem bảng đầy đủ trên trang.

Cảm ơn

Answer 1

Trước tiên, hãy xóa white-space: nowrap;

bây giờ bạn sẽ phải làm cho bảng max-width: (kích thước mà bạn muốn)

như trong ví dụ của max-width là 900px: https://jsfiddle.net/d96q4h3d/7/

nếu bạn muốn thực hiện bảng nhỏ hơn , bạn sẽ phải giảm kích thước của các <thead> thẻ, và "#price" id như thế này

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

và luôn đặt màn hình @media của bạn trong phần cuối của đáy, chứ không phải trên đỉnh!

Answer 2

Bạn đã coi việc áp dụng một WordPress theme dựa trên Bootstrap toolkit?

Nếu bạn làm điều đó, bạn có thể sử dụng this sort of pattern to emit your table và sẽ đáp ứng mà không có tất cả các loại phức tạp.

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

Bootstrap là một cách thực sự tốt để nhận bảng đáp ứng và các yếu tố khác; các nhà phát triển của nó đã thực hiện một công việc tuyệt vời để gỡ lỗi mọi thứ cho tất cả các loại trình duyệt.

Answer 3

Đó là một vấn đề khó khăn vì các bảng vốn không đáp ứng. Có nhiều cách khác nhau để đạt được kết quả mong muốn. Nhiều người sử dụng javascript.

Đây là một loạt các kỹ thuật khác nhau, bao gồm một kỹ thuật thuần CSS thực sự thông minh (# 8), đó là yêu thích của tôi.

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

EDIT:

Vì bạn cần toàn bộ bảng được hiển thị trên thiết bị di động, một giải pháp thích hợp cho trường hợp này có thể đặc biệt:

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