龙空技术网

通过CSS控制PC端的TABLE在移动端展示

郭磊77777 310

前言:

此时我们对“htmltablefont”可能比较看重,兄弟们都需要了解一些“htmltablefont”的相关文章。那么小编同时在网摘上网罗了一些对于“htmltablefont””的相关资讯,希望姐妹们能喜欢,你们一起来学习一下吧!

在不改变代码的情况下,通过CSS样式表在手机上展示表格内容

PC端

移动端

HTML源码

CSS处理的主要方法是:

将 table, tbody, tr 改为display: block。将td转换为 display: inline(和span一样的效果)这对特顶的td,设置例如颜色、背景色、位置等来改变效果

假定table的class是 the-table,CSS示例代码如下:

.the-table, .the-table>tbody.the-table>tbody>tr {	display: block;}.the-table>tbody>tr {	border-top: 1px solid #eee;	padding: 10px 20px;	background: #fff;	width: 100%;	position: relative;}.the-table>tbody>tr>td {	display: inline;	font-size: 16px;}

标签: #htmltablefont