是叶子，还是旅行的风
- 人气
- 0
- 注册时间
- 2024-7-19
- 最后登录
- 2024-11-6
|
Discuz技巧
| 适用版本: |
DX3.4 DX3.5 |
| 技巧类型: |
体验优化 |
由于手机版屏幕较小，表格通常会被挤成一团，无法像电脑版一样正常显示，这时候就需要调整代码做一下兼容。
核心思路很清晰，在表格前后封装成div，然后让div具备内部左右滑动属性，使得手机版竖屏也能美观展示表格，再给表格上一个分行色差，视觉感一下就上来了。
同样温馨提示，修改代码前一定要备份！
先看一下效果对比：
以默认风格修改为例，修改文件（其他模板请进入对应目录）template\default\touch\forum\viewthread.htm：
查找代码：
- <!--{if $post['first']}-->
- <!--{if !$_G['forum_thread']['special']}-->
- $post['message']
- <style>
- .fixtable {width:100%;overflow-x:auto}
- .fixtable *{font-family:'Mircosoft Yahei' !important;}
- .fixtable table {min-width:1000px}
- .fixtable table td{line-height:18px;font-size:14px;max-width:200px;padding:15px 10px;color:#888;font-family:'Mircosoft Yahei' !important}
- .fixtable table tr:nth-child(odd) {background-color: #FAFAFA;}
- .fixtable table tr:nth-child(even) {background-color: #ffffff;}
- </style>
- <!--{eval $post['message'] = str_replace("<table","<div class='fixtable'><table",$post['message']);}-->
- <!--{eval $post['message'] = str_replace("</table>","</table></div>",$post['message']);}-->
|
本帖子中包含更多资源
您需要 登录 才可以下载或查看，没有账号？创建通行证
×
|
发表于 2024-7-23 00:54:36
左耳时空社区
粤ICP备2024204253号