前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

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

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

CSS处理的主要方法是:

  1. 将 table, tbody, tr 改为display: block。
  2. 将td转换为 display: inline(和span一样的效果)
  3. 这对特顶的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;
}

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言