领先的免费Web技术教程,涵盖HTML到ASP.NET

网站首页 > 知识剖析 正文

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

nixiaole 2024-11-25 15:48:58 知识剖析 22 ℃

在不改变代码的情况下,通过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;
}

Tags:

最近发表
标签列表