整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
为切图网 qietu.com 的一名web前端工程师，我在为客户合作的项目做响应式开发的时候，通过css3 media query多媒体查询技术进行一些重新的排版，可以很轻松完成网站的响应式，也会碰到一些小麻烦，其中典型的例子就是table表格的响应式开发了。
相信 Web 开发人员都碰到过显示不全的情况，我是这么解决的，希望能帮到你。
一：隐藏不重要数据列
处理前：
处理后：
实现方法：
01 02 03 04 05 06 07 08 09 10 11 12 13 | @media only screen and (max-width: 800px) { table td:nth-child(2), table th:nth-child(2) {display: none;}}@media only screen and (max-width: 640px) { table td:nth-child(4), table th:nth-child(4), table td:nth-child(7), table th:nth-child(7), table td:nth-child(8), th:nth-child(8){display: none;}} |
以用户角度思考，每个人对数据的认知不同，或许你隐藏的数据对于他却是很重要的。所以这种方法不推荐。
二：固定首列，剩余列横向滚动
处理前：
处理后：
实现方法：将横向的表头利用 CSS 改为纵向显示并固定位置，其余内容部分不变并出现横向滚动条。tbody 上应用 white-space:nowrap; tbody tr 下应用 display:inline-block;
三：多列横向变2列纵向
处理前：
处理后：
实现方法：
<thead>定位隐藏，<td>变块元素，并绑定对应<th>列名，然后用伪元素的content:attr(data-th)实现<th>
插件推荐：
Responsive tables
如果你是用的 Bootstrap 3,那么推荐用Responsive tables
Demo:http://gergeo.se/RWD-Table-Patterns/#demo
tablesaw
个人觉得这款插件功能很强大，满足各种需求
文/丁向明
做一个有博客的web前端自媒体人，专注web前端开发，关注用户体验，加我qq/微信交流：6135833
http://dingxiangming.com
前2篇文章讲了《为什么375×667是移动端原型设计的最佳分辨率如何设置手机APP原型尺寸
所谓的APP原型适配手机，是指用手机浏打开原型页面的时候，横竖都刚好撑满屏幕。当然如果页面比较长，高度超过一屏是没问题的。
比如你的原型是375×667，手机是iPhone6/6s/7，那在手机上查看的时候无需缩放，默认撑满屏幕。
如果你的原型是360×640，而手机是Android的小米4、小米note、华为p7、p8荣耀6、7这些主流机型，也是一样的。
比如你的原型是375×667,而你的手机是华为p8，1080×1920。理论上来说无法完美适配APP中所有的页面。但是除了有下导航的页面一般都没问题。
你需要在Axure生成HTML的时候设置一下手机上如何展示原型。
请勾选包含视口标签。浏览器显示网页，默认是按照网页自身分辨率来展示的。勾选了此项之后，里面的区域按照下方规则来处理展示。
宽，使用默认的device-width即可。
高，一般不需要填，因为是根据宽度来决定的。
最小缩放倍数和最大缩放倍数，一般不需要填。
允许用户缩放，一般填写no。
具体规则是原型页面的横向分辨率x初始缩放倍数xDPR参数=手机屏幕的横向分辨率。得出这个值填到上图中的对应位置。
而这里的DPR参数(devicePixelRatio)，代表的是设备像素和CSS像素的比例，下方的chrome网页调试中也揭示了这一点。
所以上面的华为p8应该设置为0.96，你可以根据机型去百度搜索对应的DPR参数是多少。
通过chrome-视图-开发者-开发者工具，切换到你想看的手机尺寸。同时也可以用这个工具去了解在其他机型上面的效果，以方面了解是不是需要单独适配。
当然safari的菜单栏-开发-响应者模式也可以。
请用手机浏览器打开该网页，请用手机浏览器打开该网页，最好生成到桌面查看效果。比如我设计的原型。
建议竖向减掉20px，因为Axure默认不显示顶部状态栏。
建议你们下次设计APP原型的时候按照通用分辨率375×667来设置，次选方法是按照自己手机的逻辑分辨率来定尺寸。。
如果想明白为什么要这样设置，可以去搜索viewport和逻辑分辨率等概念。当然就使用而言，PM无需了解这些知识。
至于如何把原型放到手机上面查看，我们下次再讲。
调查了身边五六年经验以上的几个前端同学和同事，尽然发现绝大部分人都不知道，当然，在看到这个文章之前，我也不知道这个，平时虽然都一直在做web前端开发，但真没涉及到这块，或者说涉及到了，也解决了，但是还真没探究过这个问题，你是否躺枪了呢？
这是一个很让人困惑的CSS特征，我之前也谈到过它。我们大家都知道，当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如padding-top,padding-bottom,margin-top,margin-bottom等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。
下面是一个实例演示代码，你可以调整容器的宽度，但你会发现，黄块块的padding-bottom的距离也会随之宽度而变大或变小。
HTML代码
<div class="wrapper" id="w">
<div class="box" id="b"></div>
</div>
<input type="range" min="120" max="400" value="400" class="range" id="r">
<output>宽度是: <span id="op">400px</span></output>
<output>黄块块的Padding bottom是:<br><span id="op2">10%</span></output>
CSS代码
body {
font-family: Arial, sans-serif;
padding-top: 30px;
text-align: center;
}
.wrapper {
width: 400px;
margin: 0 auto;
border: solid 1px black;
}
.box {
width: 100px;
height: 100px;
background: gold;
margin-left: auto;
margin-right: auto;
padding-top: 10%;
padding-bottom: 10%;
margin-bottom: 5%;
}
.range {
display: block;
margin: 20px auto;
}
output {
text-align: center;
display: block;
font-weight: bold;
padding-bottom: 20px;
}
output span {
font-weight: normal;
}
上面的代码中，我们对内部子元素声明了3个竖向的距离，都是百分比形式。当移动滑块时，我们的js代码只需修改了容器的宽度。但是，这个这三个属性高度都跟随着变化，可以看出，它们的百分比计算是基于容器的宽度，而不是高度的。
切图网致力于web前端技术开发，关注用户体验，关注移动web前端，响应式，微场景等技术，如果你对此感兴趣请加公众微信账号：qietuwang
*请认真填写需求信息，我们会在24小时内与您取得联系。
