我知道这个堆栈上已经发布了很多关于响应表的问题，但相信我，我已经解决了所有这些问题，但还没有找到解决我的问题的方法。或者，也许我并不确切地知道我在寻找什么，这就是为什么我不得不在这里问一个问题。
手头的问题很简单。我正在制作一个 wordpress 网站。我不太喜欢主题定价表，所以我接受了自己制作的挑战。这是我需要此表的 Wordpress 页面的链接: http://www.desklers.com/uae/undergraduate-packages
所以我的 table 没问题，但我无法使其响应。 以下是我在 wordpress 中放入我的视觉 Composer 的原始 html 小部件的 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/
使用媒体查询，并将 overflow-x 设置为自动，我已经能够使我的表格沿 x 轴可拖动。但是我希望表格在页面加载时完整显示，以便用户可以看到完整的表格。如果他想仔细观察，他可以放大任何特定部分。
如能就此问题提供任何帮助，我们将不胜感激。我在谷歌上做了很多研究，但一直无法找到一个特定的解决方案来解释我如何在页面上查看完整的表格。
谢谢
最佳答案
首先删除white-space: nowrap;
现在你必须让表格最大宽度:(你想要的大小)
如示例中的最大宽度为 900 像素:https://jsfiddle.net/d96q4h3d/7/
如果您想缩小表格，则必须减小 <thead> 的大小标签，以及像这样的“#price”id
@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;
}
}
并且始终将您的@media 屏幕放在底部的末端，而不是顶部!
关于html - 在 WordPress 中制作响应表。，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33354098/
我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h
在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这
所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择
我是Google云的新手，我正在尝试对其进行首次部署。我的第一个部署是RubyonRails项目。我基本上是在关注thisguideinthegoogleclouddocumentation.唯一的区别是我使用的是我自己的项目，而不是他们提供的“helloworld”项目。这是我的app.yaml文件runtime:customvm:trueentrypoint:bundleexecrackup-p8080-Eproductionconfig.ruresources:cpu:0.5memory_gb:1.3disk_size_gb:10当我转到我的项目目录并运行gcloudprevie
我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.
我正在学习http://ruby.railstutorial.org/chapters/static-pages上的RubyonRails教程并遇到以下错误StaticPagesHomepageshouldhavethecontent'SampleApp'Failure/Error:page.shouldhave_content('SampleApp')Capybara::ElementNotFound:Unabletofindxpath"/html"#(eval):2:in`text'#./spec/requests/static_pages_spec.rb:7:in`(root)'
Unity自动旋转动画1.开门需要门把手先动,门再动2.关门需要门先动,门把手再动3.中途播放过程中不可以再次进行操作觉得太复杂?查看我的文章开关门简易进阶版效果:如果这个门可以直接打开的话,就不需要放置"门把手"如果门把手还有钥匙需要旋转,那就可以把钥匙放在门把手的"门把手",理论上是可以无限套娃的可调整参数有:角度,反向,轴向,速度运行时点击Test进行测试自己写的代码比较垃圾,命名与结构比较拉,高手轻点喷,新手有类似的需求可以拿去做参考上代码usingSystem.Collections;usingSystem.Collections.Generic;usingUnityEngine;u
动漫制作技巧是很多新人想了解的问题，今天小编就来解答与大家分享一下动漫制作流程，为了帮助有兴趣的同学理解，大多数人会选择动漫培训机构，那么今天小编就带大家来看看动漫制作要掌握哪些技巧？一、动漫作品首先完成草图设计和原型制作。设计草图要有目的、有对象、有步骤、要形象、要简单、符合实际。设计图要一致性，以保证制作的顺利进行。二、原型制作是根据设计图纸和制作材料，可以是手绘也可以是3d软件创建。在此步骤中，要注意的问题是色彩和平面布局。三、动漫制作制作完成后，加工成型。完成不同的表现形式后，就要对设计稿进行加工处理，使加工的难易度降低，并得到一些基本准确的概念，以便于后续的大样、准确的尺寸制定。四、
我正在尝试将一个简单的CSV文件读入HTML表格以在浏览器中显示，但我遇到了麻烦。这就是我正在尝试的:Controller:defshow@csv=CSV.open("file.csv",:headers=>true)end查看:输出:NameStartDateEndDateQuantityPostalCode基本上我只获取标题，而不会读取和呈现CSV正文。 最佳答案 这最终成为最终解决方案:Controller:defshow#OpenaCSVfile,andthenreaditintoaCSV::Tableobjectforda
在我做的一些网络开发中，我有多个操作开始，比如对外部API的GET请求，我希望它们同时开始，因为一个不依赖另一个的结果。我希望事情能够在后台运行。我找到了concurrent-rubylibrary这似乎运作良好。通过将其混合到您创建的类中，该类的方法具有在后台线程上运行的异步版本。这导致我编写如下代码，其中FirstAsyncWorker和SecondAsyncWorker是我编写的类，我在其中混合了Concurrent::Async模块，并编写了一个名为“work”的方法来发送HTTP请求:defindexop1_result=FirstAsyncWorker.new.async.