触屏手机版帖子详情页表格显示优化教程

黄亚东15997864455

可以横向滑动显示，增加表格描边

修改教程：
在模板目录下 如默认模板template/default/touch/forum/viewthread.htm
文件倒数第二行增加以下代码（<!--{template common/footer}-->之前）

1. 
   
2. <style>
   
3.          
   
4.         .message table td {
   
5.                 padding: 5px;
   
6.                 white-space: nowrap;
   
7.                 overflow: hidden;
   
8.                 text-overflow: ellipsis;
   
9.                 border: 1px solid #ddd;
   
10.         }
    
11. </style>
    
12. <script type="text/javascript">
    
13.     function optimizeTables() {
    
14.         var tables = document.querySelectorAll('.message table');
    
15.         tables.forEach(function(table) {
    
16.             // 设置表格样式
    
17.             table.style.width = '100%';
    
18.             table.style.maxWidth = 'none'; // 移除最大宽度限制
    
19.             table.style.tableLayout = 'fixed';
    
20.             table.style.overflowX = 'auto';
    
21.             table.style.display = 'block';
    
22.             
    
23.             var cells = table.rows[0].cells;
    
24.             var cellCount = cells.length;
    
25.             var minCellWidth = 100; // 最小列宽
    
26.            
    
27.             
    
28.             // 设置每列的宽度
    
29.             for (var i = 0; i < cellCount; i++) {
    
30.                 cells[i].style.minWidth = minCellWidth + 'px';
    
31.                 cells[i].style.width = (100 / cellCount) + '%';
    
32.             }
    
33.             
    
34.             // 处理所有单元格
    
35.             var allCells = table.getElementsByTagName('td');
    
36.             for (var i = 0; i < allCells.length; i++) {
    
37.                 allCells[i].style.whiteSpace = 'nowrap';
    
38.                 allCells[i].style.overflow = 'hidden';
    
39.                 allCells[i].style.textOverflow = 'ellipsis';
    
40.             
    
41.             }
    
42.         });
    
43.     }
    
44. 
    
45.     // 在页面加载完成和窗口大小改变时调用此函数
    
46.     window.addEventListener('load', optimizeTables);
    
47.     window.addEventListener('resize', optimizeTables);
    
48.     </script>

复制代码