rem字体+百分比布局表格
2024-09-06 17:41:15
效果图：
上源码
<!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“ 不起任何作用，我这里使用的是百分比布局；
最新文章
- BZOJ 1691: [Usaco2007 Dec]挑剔的美食家 [treap 贪心]
- 《Entity Framework 6 Recipes》中文翻译系列 (43) ------ 第八章 POCO之使用POCO加载实体
- World Wind .NET开发
- 关于js中闭包的理解
- OpenCV图像金字塔：高斯金字塔、拉普拉斯金字塔与图片尺寸缩放
- PHP乱码问题，UTF-8（乱码）
- Linux 内核版本规律
- 《Unix网络编程》卷2 读书笔记 第2章- Posix IPC
- xss攻击入门
- isalpha函数，判断字符是否是字母
- 关于JAVA中split方法使用竖线异常的问题
- lucene Filter过滤器
- Duilib第一步(III)-知识进阶
- 求一个数组中重复数字的个数，要求复杂度为O(n)
- python 日志滚动 分文件
- Android中的各种访问权限Permission含义
- striding layers 是什么意思？
- 在eclipse安装mybatis的插件
- CodeFoorces 803C Maximal GCD
- Hibernate错误：Could not bind factory to JNDI