5
我知道這個堆棧上已經發布了許多關於響應表的問題，但相信我我已經通過了所有這些問題，並且還沒有找到解決方案來解決我的問題。或者，也許我不知道我在找什麼，這就是爲什麼我不得不在這裏問一個問題。在WordPress中製作響應表。
手頭的問題非常簡單。我正在製作一個WordPress的網站。我並不完全喜歡主題定價表，所以我接受了挑戰，使自己的。這裏是我的Wordpress頁面的鏈接，我需要這張表格： http://www.desklers.com/uae/undergraduate-packages
所以我的桌子很好，但我很難讓它響應。 以下是我把我的視覺作曲家的原始的HTML控件在WordPress的HTML：
<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/
使用媒體查詢，並設置溢出-x到auto，我已經能夠使我的表格能夠沿着x軸拖動。但是，我希望表格在頁面加載時顯示爲完整，以便用戶可以看到整個表格。然後他可以放大任何特定的部分，如果他想仔細看看它。
對這個問題的任何幫助將不勝感激。我在Google上做了大量的研究，但一直未能找到解釋我如何查看頁面上的完整表格的特定解決方案。
感謝
到目前爲止，這似乎是最好的工作解決方案！謝謝一堆！：D 只有一個問題，無限的特色功能區似乎沒有隨着小提琴中的表一起調整大小。我怎麼能解決這個問題？ –
你不需要調整它的大小，因爲它已經很小了，我的意見是你需要將它移動一點，併爲標記添加一些高度，這樣它就不會太多地溢出文本。這裏是你的更新：https：//jsfiddle.net/d96q4h3d/8/（你也可以從@media屏幕中刪除它，通過顯示降低600px：無） – kloshar4o
1
+0
+1
+0
1
+0
+0
+0
相關問題
-
1. 如何製作帶有圖片的表格，在wordpress中響應
-
2. 如何在CSS中製作響應表
-
3. 在wordpress中作出響應菜單
-
4. 製作響應
-
5. 如何在Underscores（wordpress）上製作響應排版？
-
6. 製作響應板
-
7. 如何製作響應式RTL列表？
-
8. 製作HTML類似Zurbs響應表
-
9. 如何製作大型表格響應
-
10. 如何製作「無響應」的表單？
-
11. 如何製作Iframe響應表
-
12. 如何製作無響應的表格？
-
13. 如何製作響應表格標題？
-
14. 在QuestionGrid中限制Google表單響應
-
15. Wordpress中的響應元素
-
16. 如何在表格單元格中製作響應式圖像？
-
17. 在表格中製作圖片庫，但響應度很高
-
18. 響應Wordpress不能正常工作
-
19. 在WordPress中修改HTTP響應標頭
-
20. 將Google表單響應行復制到新工作表中
-
21. 響應WordPress主題
-
22. WordPress的Ajax響應
-
23. 無法在wordpress中顯示選擇框作爲ajax響應
-
24. 製作菜單響應
-
25. 製作div寬度響應
-
26. 製作響應高度CSS
-
27. 製作三列HTML響應
-
28. 製作圖片響應
-
29. 製作響應式網頁
-
30. 製作響應式網格
最新問題
-
1. jsoup關鍵詞搜索元素
-
2. 是否可以訪問鍵盤控制器的內部製作/中斷代碼緩衝區？
-
3. 中級和根證書文件
-
4. 如何僅從模式
-
5. Microsoft Visual Studio：Windows和Unix項目源代碼兼容性
-
6. 如何檢查iPhone應用程序的網絡活動？
-
7. 嵌套模塊的聲明文件
-
8. 慶幸，擴展沒有被加載
-
9. 關於在magento 2中添加CSS
-
10. 如何在Mac上找到Android SDK管理器路徑
-
1. 如何製作帶有圖片的表格，在wordpress中響應
-
2. 如何在CSS中製作響應表
-
3. 在wordpress中作出響應菜單
-
4. 製作響應
-
5. 如何在Underscores（wordpress）上製作響應排版？
-
6. 製作響應板
-
7. 如何製作響應式RTL列表？
-
8. 製作HTML類似Zurbs響應表
-
9. 如何製作大型表格響應
-
10. 如何製作「無響應」的表單？
你有沒有考慮採用基於該Bootstrap toolkit一個WordPress theme？
如果你這樣做，你可以使用this sort of pattern to emit your table，它會響應沒有各種麻煩。
Bootstrap是獲得響應表和其他UI元素的一種非常好的方法;它的開發人員已經爲各種瀏覽器調試了很多東西。
來源
2015-10-26 19:41:37
事情是我正在爲客戶做這個網站。我自己還不是專業人士，所以一直在試驗和學習！因此，客戶爲他的網站選擇了主題並支付了費用，因此我必須遵循它。 –
該解決方案使表格（有點）響應。基本上設置'overflow-x：auto;'這會讓你能夠水平滾動表格。 –
我已經能夠做到這一點。我需要的是桌子在小屏幕設備上調整大小並完全顯示在屏幕上，並且從那裏用戶可以放大桌子，但他想要的。溢出x不是解決這個問題的方法。我需要將其關閉，並找到另一種方法根據屏幕大小調整表格大小。 ：/ –
這是一個很難解決的問題，因爲表格本身沒有響應。有很多不同的方法來達到預期的結果。許多包括使用JavaScript。
這是一個很好的綜合了不同的技術，包括一個非常聰明的純CSS（＃8），這是我的最愛。
http://exisweb.net/responsive-table-plugins-and-patterns
編輯：
由於需要對整個表是在移動設備上可見，這種情況下的合適的解決方案可能是具體爲：
https://github.com/ghepting/jquery-responsive-tables - DEMO
來源
2015-10-26 20:08:16
我已經到過這個頁面。 ＃8無效，因爲即使這樣也不會在小屏幕設備上顯示屏幕上的完整表格。由於我對JS不太舒服，所以我正在尋找一個CSS解決方案。但顯然，如果我找不到一個，那麼將不得不選擇JS :( –
那麼如何通過媒體查詢縮小小設備寬度的字體呢？ –
或者這個：https：//github.com/ghepting/jquery-響應表 –
相關問題