Discuz! 让手机版也支持电脑版帖子表格样式

boonkiong

受页面大小限制，表格边框或许显示的不太美观，但是仍然比原来没有边框要好看的多！

1、首先打开 source/function/function_discuzcode.php ，查找（有两处）：

1. : '<table>'

复制代码

修改为：

1. :'<table cellspacing="0" class="t_table" '

复制代码

2、接着打开 static/image/mobile/style.css ，在最下边添加：

1. .t_table{
   
2.     table-layout: auto;
   
3. }
   
4. .t_table td{padding: 4px;
   
5.     line-height: 1.1;
   
6.     border: 1px solid #afbeca;
   
7.     overflow: hidden;
   
8. }  

复制代码

然后到后台更新缓存。

boonkiong

可以横向滑动显示，增加表格描边
修改教程：
在模板目录下 如默认模板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>

复制代码

楼层文章来源：https://www.dismall.com/thread-23264-1-1.html