手机版帖内表格做成可左右滑动样式

cyee

由于手机版屏幕较小，表格通常会被挤成一团，无法像电脑版一样正常显示，这时候就需要调整代码做一下兼容。
核心思路很清晰，在表格前后封装成div，然后让div具备内部左右滑动属性，使得手机版竖屏也能美观展示表格，再给表格上一个分行色差，视觉感一下就上来了。

同样温馨提示，修改代码前一定要备份！

先看一下效果对比：




以默认风格修改为例，修改文件（其他模板请进入对应目录）template\default\touch\forum\viewthread.htm：
查找代码：

1. <!--{if $post['first']}-->
   
2. <!--{if !$_G['forum_thread']['special']}-->
   
3. $post['message']

复制代码

在其上方加入代码：

1. <style>
   
2. .fixtable {width:100%;overflow-x:auto}
   
3. .fixtable *{font-family:'Mircosoft Yahei' !important;}
   
4. .fixtable table {min-width:1000px}
   
5. .fixtable table td{line-height:18px;font-size:14px;max-width:200px;padding:15px 10px;color:#888;font-family:'Mircosoft Yahei' !important}
   
6. .fixtable table tr:nth-child(odd) {background-color: #FAFAFA;}
   
7. .fixtable table tr:nth-child(even) {background-color: #ffffff;}
   
8. </style>
   
9. <!--{eval $post['message'] = str_replace("<table","<div class='fixtable'><table",$post['message']);}-->
   
10. <!--{eval $post['message'] = str_replace("</table>","</table></div>",$post['message']);}-->

复制代码

后台更新缓存即可。