专业编程基础技术教程

网站首页 > 基础教程 正文

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

ccvgpt 2024-07-21 17:35:13 基础教程 10 ℃

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

CSS处理的主要方法是:

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

  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:

最近发表
标签列表