效果图：

上源码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>rem字体+百分比布局表格</title>

     <style>

         table{width:100%;height:auto;font-size:.11rem}

         table tr>td{width:25%;vertical-align:middle;text-align:center;background-color:#FFFFFF;height:.33rem;line-height:.33rem}

         table tr:nth-of-type(odd) td:nth-of-type(even){background:#EEFFFF;color:#333}

         table tr>td:nth-of-type(odd){background:#F0F0F0;color:#006600}

     </style>

 </head>

 <body>

     <table cellspacing="0" bordercolor="#F1E0A0" cellpadding="0" border="1">

         <tr>

             <td>区域方位</td>

             <td>城南区域</td>

             <td>小区地段</td>

             <td>灵安</td>

         </tr>

         <tr>

             <td>房屋类型</td>

             <td>小高层</td>

             <td>户型结构</td>

             <td>3室2厅1卫</td>

         </tr>

         <tr>

             <td>所在楼层</td>

             <td>1 楼</td>

             <td>装修程度</td>

             <td>毛坯未装</td>

         </tr>

         <tr>

             <td>楼层总数</td>

             <td>12 层</td>

             <td>建筑面积</td>

             <td>95.40㎡ </td>

         </tr>

         <tr>

             <td>车库车位</td>

             <td>自行车库</td>

             <td>契证年数</td>

             <td>未满两年 </td>

         </tr>

         <tr>

             <td>小学学区</td>

             <td></td>

             <td>中学学区</td>

             <td>桐乡七中</td>

         </tr>

         <tr>

             <td>房屋朝向</td>

             <td>朝南</td>

             <td>土地性质</td>

             <td>商业用地 </td>

         </tr>

         <tr>

             <td>建成年份</td>

             <td>2017</td>

             <td>每平单价</td>

             <td>8909元 </td>

         </tr>

         <tr>

             <td>证件情况</td>

             <td>证件齐全</td>

             <td>交易价格</td>

             <td style="color:red;">85.00万</td>

         </tr>

         <tr>

             <td>配套设施</td>

             <td colspan="3"></td>

         </tr>

     </table>

     <script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script>

     <script>

         (function (doc, win) {

             var docEl = doc.documentElement,

                 resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",

                 recalc = function () {

                     var clientWidth = docEl.clientWidth;

                     if (!clientWidth)

                         return;

                     if (clientWidth < 750) {

                         docEl.style.fontSize = 120 * (clientWidth / 750) + "px";

                         console.log(120 * (clientWidth / 750) + "px")

                     } else {

                         docEl.style.fontSize = "120px"

                     }

                 };

             if (!doc.addEventListener)

                 return;

             win.addEventListener(resizeEvt, recalc, false);

             doc.addEventListener('DOMContentLoaded', recalc, false)

         })(document, window);

         $(document).ready(function () {});

     </script>

 </body>

利用rem字体！不要使用flex布局，否则 colspan = ”3“ 不起任何作用，我这里使用的是百分比布局；

rem字体+百分比布局表格的更多相关文章

  1. 前端笔记之移动端&响应式（中）视口&百分比布局&弹性盒模型&rem&fillpage

    一.viewport视口 1.1什么是屏幕尺寸.屏幕分辨率.屏幕像素密度? 屏幕尺寸:指屏幕的对角线的长度,单位是英寸,常见的屏幕尺寸有3.5.3.7.4.2.4.7.5.0.5.5.6.0等. 屏幕 ...

  2. 移动端利用rem实现自适应布局

    好久没有写博客了,刚好说说最近遇到的移动端布局问题吧. 本来一直是觉得我的页面布局能力还是不错的,当然,是相对于较基础的来说还是不错的.不过,自己写的案例终归是跟实际开发有区别的,自己写案例的是觉得这 ...

  3. css中height 100vh的应用场景，动态高度百分比布局，浏览器视区大小单位

    css中height 100vh的应用场景,动态高度百分比布局,浏览器视区大小单位 height:100vh 一些只能vw, vh才能完成的应用场景: 1. 场景之:元素的尺寸限制 vw vh 主要是 ...

  4. Android 屏幕适配（二）增强版百分比布局库(percent-support-lib)

    转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/46767825: 本文出自:[张鸿洋的博客] 一 概述 上周一我们发布了Andr ...

  5. Html5移动端页面自适应百分比布局

    按百分比布局,精度肯定不会有rem精确 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  6. Android 增强版百分比布局库 为了适配而扩展

    转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/46767825: 本文出自:[张鸿洋的博客] 一 概述 上周一我们发布了Andr ...

  7. rem.js移动布局实例教程

    最近想买需要开发微站,微信公众号内嵌入的移动web,总结方法可以使用css3直接使用百分比布局,也可以使用bootstrap做响应式布局等多种方法,个人感觉看项目需要,笔者使用rem.js进行移动前端 ...

  8. Android百分比布局支持库介绍——com.android.support:percent（转）

    转载自http://www.apkbus.com/forum.php?mod=viewthread&tid=244752&extra=&_dsign=0b699c42 在此之前 ...

  9. HTML-移动端如何使用css让百分比布局的弹窗水平和垂直方向上居中

    pc端让一个弹窗水平和垂直方向居中,在知道弹窗宽高的情况下很好计算,只需要用如下css即可: #date{ width: 300px; height: 300px; position: absolut ...

随机推荐

  1. 使用IDEA在引入Schema空间时报错URI is not registered解决方法以及Idea @Autowired取消提示 方法

    使用IDEA在引入Schema空间时报错URI is not registered解决方法以及Idea @Autowired取消提示 方法   Idea @Autowired取消提示 spring b ...

  2. [CSP-S模拟测试]:建设城市（city）（组合数学+容斥）

    题目传送门(内部题8) 输入格式 一行三个整数$n,m,k$. 输出格式 一行一个整数表示答案.对$998244353$取模. 样例 样例输入 3 7 3 样例输出 数据范围与提示 对于10%的数据, ...

  3. php strtotime,mktime,DateTime函数处理时间累加问题

    时间戳(年月日时分秒)  使用strtotime函数,结合+1 month,-1 month,next month,last month的时候会出现一些问题. demo示例: //时间"20 ...

  4. selenium中的多窗口切换

    在selenium中,我们会遇到一些问题,就是多窗口处理的问题,我们爬取的内容在一个新窗口上,这个时候,我们就需要先切换到这个新的窗口上,然后进行抓取内容. 如何切换呢? 首先,获取当前窗口句柄 1. ...

  5. 【CDN+】 Kylin 的初步认识与理解

    前言 项目中用到了Kylin框架来处理数据,那么作为项目成员需要了解哪些关于Kylin的知识呢,本文就Kylin得基本概念和原理进行简述. Kylin基本概念 首先想到的学习路径是Kylin官网: h ...

  6. iReport+JasperReport+JSP 输出HTML方式预览

    <%@ page language="java" contentType="text/html; charset=UTF-8"      pageEnco ...

  7. [LeetCode] 177.第N高薪水

    题目: 编写一个 SQL 查询,获取 Employee表中第 n 高的薪水(Salary). +----+--------+ | Id | Salary | +----+--------+ | 1 | ...

  8. Erueka异常

    /\\ / ___'_ __ _ _(_)_ __ __ _ \ \ \ \( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \ \\/ ___)| |_)| | | | ...

  9. 细聊Spring Cloud Bus

    细聊Spring Cloud Bus Spring 事件驱动模型 因为Spring Cloud Bus的运行机制也是Spring事件驱动模型所以需要先了解相关知识点: 上面图中是Spring事件驱动模 ...

  10. 最短路 dijkstra算法

    题目 给定n个点的带权有向图,求从1到n的路径中边权之和最小的路径. dijkstra实现方法 用dist[i]表示i这个点到原点的最短距离,一开始初始化为无穷大,然后将原点设为0. 用ok[i]表示 ...