网站首页 > 知识剖析 正文
在不改变代码的情况下,通过CSS样式表在手机上展示表格内容
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;
}
猜你喜欢
- 2024-11-25 Chrome 108 发布新的 CSS 布局单位升级
- 2024-11-25 简单小程序:登录页面(html)
- 2024-11-25 利用 Python 开发桌面小工具,实现htm自动转为excel文件
- 2024-11-25 团结一致,尽显风采丨TR02807班HTML项目验收
- 2024-11-25 想学HTML该从何入手?web前端HTML终极指南
- 2024-11-25 超实用压力测试工具-ab工具
- 2024-11-25 前端入门二(html)
- 2024-11-25 JavaScript中的DOM
- 2024-11-25 HTML网页制作常用标签及说明——前端开发入门
- 2024-11-25 网页开发HTML5入门内容,一起来学习吧
- 最近发表
- 标签列表
-
- xml (46)
- css animation (57)
- array_slice (60)
- htmlspecialchars (54)
- position: absolute (54)
- datediff函数 (47)
- array_pop (49)
- jsmap (52)
- toggleclass (43)
- console.time (63)
- .sql (41)
- ahref (40)
- js json.parse (59)
- html复选框 (60)
- css 透明 (44)
- css 颜色 (47)
- php replace (41)
- css nth-child (48)
- min-height (40)
- xml schema (44)
- css 最后一个元素 (46)
- location.origin (44)
- table border (49)
- html tr (40)
- video controls (49)