手机版表格显示不全怎么办？x3.5

文強 · 发表于 2024-8-20 17:44:14

或许你可以试试我这个方法------https://boonkiong.com/thread-3699-1-1.html

铁板鱿鱼烧 · 发表于 2024-8-20 18:42:34

文強发表于 2024-8-20 17:44
或许你可以试试我这个方法------https://boonkiong.com/thread-3699-1-1.html

这个方法确实不错，就是如果表格特别宽，全都都挤到这里，也很麻烦看不清，能够水平往右边滑动看到更多，其实效果更好,有没有想法修改下

qzuser1212 · 发表于 2024-8-20 22:34:08

在模板目录下如默认模板template/default/touch/forum/viewthread.htm
文件倒数第二行增加以下代码（之前）

<style>
.message table td {
padding: 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid #ddd;
}
</style>
<script type="text/javascript">
function optimizeTables() {
var tables = document.querySelectorAll('.message table');
tables.forEach(function(table) {
// 设置表格样式
table.style.width = '100%';
table.style.maxWidth = 'none'; // 移除最大宽度限制
table.style.tableLayout = 'fixed';
table.style.overflowX = 'auto';
table.style.display = 'block';
var cells = table.rows[0].cells;
var cellCount = cells.length;
var minCellWidth = 100; // 最小列宽
// 设置每列的宽度
for (var i = 0; i < cellCount; i++) {
cells[i].style.minWidth = minCellWidth + 'px';
cells[i].style.width = (100 / cellCount) + '%';
}
// 处理所有单元格
var allCells = table.getElementsByTagName('td');
for (var i = 0; i < allCells.length; i++) {
allCells[i].style.whiteSpace = 'nowrap';
allCells[i].style.overflow = 'hidden';
allCells[i].style.textOverflow = 'ellipsis';
}
});
}
// 在页面加载完成和窗口大小改变时调用此函数
window.addEventListener('load', optimizeTables);
window.addEventListener('resize', optimizeTables);
</script>

复制代码

鸿茂传媒 · 发表于 2024-8-21 08:38:49

用编辑器自带的试试看，如果不行的话，只能单独对手机版做页面优化。

铁板鱿鱼烧 · 发表于 2024-8-23 15:20:58

感谢各位的回答，我组织了一下，这个问题修改下代码就好了，也希望官方可以把这个代码整合进下一个版本更新！
我的站点测试链接：https://blog.haodaima.cn/forum.php?mod=viewthread&tid=1

我修改后的代码，不仅可以实现手机上左右滑动，正确显示表格状态，左上角还有一个按钮，支持一键复制表格内容，同时【全选表格】告知用户复制了哪些，弹出提示框：“表格内容已复制”。每次点击，提示框的颜色都不一样，方便区分有时候复制错表格再来复制这个，提醒当前复制的是哪个。

代码如下：

1、打开文件/source/function/function_discuzcode.php

约438行左右，找到表格显示函数，function parsetable，将其内容替换如下：意在修改表格显示样式，其中蓝色部分为修改的部分，可整个函数复制替换，只替换蓝色也行

function parsetable($width, $bgcolor, $message) {
if(strpos($message, '[/tr]') === FALSE && strpos($message, '[/td]') === FALSE) {
$rows = explode("\n", $message);
<font color="#0000ff"> $s = !defined('IN_MOBILE') ? '<div style="overflow-x:auto;"><button class="copy-btn" onclick="copyTable(this)" style="margin-bottom: 10px;">一键复制</button><table cellspacing="0" class="t_table" '.
($width == '' ? NULL : 'style="width:'.$width.'"').
($bgcolor ? ' bgcolor="'.$bgcolor.'">' : '>') : '<div style="overflow-x:auto;"><button class="copy-btn" onclick="copyTable(this)" style="margin-bottom: 10px;">一键复制</button><table cellspacing="0" class="t_table">';</font>
foreach($rows as $row) {
$s .= '<tr><td>'.str_replace(array('\|', '|', '\n'), array('|', '</td><td>', "\n"), $row).'</td></tr>';
}
$s .= '</table>';
return $s;
} else {
if(!preg_match("/^\[tr(?:=([\s%,#\w]+))?\]\s*\[td([=\d,%]+)?\]/", $message) && !preg_match("/^<tr[^>]*?>\s*<td[^>]*?>/", $message)) {
return str_replace('\"', '"', preg_replace("/\[tr(?:=([\s%,#\w]+))?\]|\[td([=\d,%]+)?\]|\[\/td\]|\[\/tr\]/", '', $message));
}
if(substr($width, -1) == '%') {
$width = substr($width, 0, -1) <= 98 ? intval($width).'%' : '98%';
} else {
$width = intval($width);
$width = $width ? ($width <= 560 ? $width.'px' : '98%') : '';
}
$message = preg_replace_callback("/\[tr(?:=([\s%,#\w]+))?\]\s*\[td(?:=(\d{1,4}%?))?\]/i", 'parsetable_callback_parsetrtd_12', $message);
$message = preg_replace_callback("/\[\/td\]\s*\[td(?:=(\d{1,4}%?))?\]/i", 'parsetable_callback_parsetrtd_1', $message);
$message = preg_replace_callback("/\[tr(?:=([\s%,#\w]+))?\]\s*\[td(?:=(\d{1,2}),(\d{1,2})(?:,(\d{1,4}%?))?)?\]/i", 'parsetable_callback_parsetrtd_1234', $message);
$message = preg_replace_callback("/\[\/td\]\s*\[td(?:=(\d{1,2}),(\d{1,2})(?:,(\d{1,4}%?))?)?\]/i", 'parsetable_callback_parsetrtd_123', $message);
$message = preg_replace("/\[\/td\]\s*\[\/tr\]\s*/i", '</td></tr>', $message);
<font color="#0000ff"> return (!defined('IN_MOBILE') ? '<div style="overflow-x:auto;"><button class="copy-btn" onclick="copyTable(this)" style="margin-bottom: 10px;">一键复制</button><table cellspacing="0" class="t_table" '.
($width == '' ? NULL : 'style="width:'.$width.'"').
($bgcolor ? ' bgcolor="'.$bgcolor.'">' : '>') : '<div style="overflow-x:auto;"><button class="copy-btn" onclick="copyTable(this)" style="margin-bottom: 10px;">一键复制</button><table cellspacing="0" class="t_table">').
str_replace('\"', '"', $message).'</table></div>';</font>
}
}

复制代码

2、修改电脑端样式，使【框线显示更清晰】【增加一键复制按钮】

找到/template/default/common/header_common.htm

在文件底部添加如下代码

<script>
var lastColorSchemeIndex = -1; // 初始化变量，记录上一次使用的颜色索引，初始值为-1表示尚未选择颜色
function copyTable(button) {
var table = button.nextElementSibling; // 获取按钮下一个兄弟元素，即表格元素
// 定义一个函数，用于选择整个表格内容
function selectTable() {
if (window.getSelection) {
// 创建一个新的范围对象
var range = document.createRange();
range.selectNode(table); // 将范围设置为包含整个表格
window.getSelection().removeAllRanges(); // 清除当前的所有选区
window.getSelection().addRange(range); // 将新的范围添加到选区中
} else if (document.selection) {
// 针对较旧的浏览器（如IE）的选择逻辑
var range = document.body.createTextRange();
range.moveToElementText(table); // 将范围设置为表格文本
range.select(); // 选择范围
}
}
// 首先选择表格内容，以便后续操作
selectTable();
var rows = table.rows; // 获取表格的所有行
var result = ''; // 初始化一个空字符串，用于存储表格数据
// 遍历表格的每一行
for (var i = 0; i < rows.length; i++) {
var cells = rows[i].cells; // 获取当前行的所有单元格
// 遍历当前行的每一个单元格
for (var j = 0; j < cells.length; j++) {
result += cells[j].innerText + (j === cells.length - 1 ? '' : '\t'); // 将单元格内容加入结果字符串，用制表符分隔
}
result += '\n'; // 每一行结束后，加入换行符
}
// 移除最后一个多余的换行符
if (result.endsWith('\n')) {
result = result.slice(0, -1);
}
// 将结果复制到剪贴板
var tempTextArea = document.createElement('textarea'); // 创建一个临时的文本区域元素
tempTextArea.value = result; // 将表格内容赋值给临时文本区域
document.body.appendChild(tempTextArea); // 将临时文本区域添加到文档中
tempTextArea.select(); // 选择临时文本区域的内容
document.execCommand('copy'); // 执行复制命令
document.body.removeChild(tempTextArea); // 复制完成后，移除临时文本区域
// 再次选择表格，确保它在复制后被全选
selectTable();
// 定义三种提示框颜色方案，包含背景色和文字颜色
var colorSchemes = [
{ background: '#4CAF50', color: 'white' }, // 绿色背景，白色文字
{ background: '#FF9800', color: 'black' }, // 橙色背景，黑色文字
{ background: '#2196F3', color: 'white' } // 蓝色背景，白色文字
];
// 确保新选择的颜色方案与上一次不同
var newColorSchemeIndex;
do {
newColorSchemeIndex = Math.floor(Math.random() * colorSchemes.length); // 随机选择一个颜色索引
} while (newColorSchemeIndex === lastColorSchemeIndex); // 如果新颜色与上一次相同，则重新选择
lastColorSchemeIndex = newColorSchemeIndex; // 更新记录的颜色索引为当前选择的颜色
var selectedColorScheme = colorSchemes[newColorSchemeIndex]; // 获取选中的颜色方案
// 创建一个提示框元素，并设置其样式和文本内容
var alertBox = document.createElement('div');
alertBox.className = 'copy-alert'; // 设置提示框的CSS类
alertBox.textContent = "表格内容已复制！"; // 设置提示框显示的文本
alertBox.style.backgroundColor = selectedColorScheme.background; // 应用随机选择的背景颜色
alertBox.style.color = selectedColorScheme.color; // 应用随机选择的文字颜色
document.body.appendChild(alertBox); // 将提示框添加到文档中
// 让提示框显示
alertBox.style.display = 'block';
// 1秒后自动隐藏提示框并移除它
setTimeout(function() {
alertBox.style.display = 'none'; // 隐藏提示框
document.body.removeChild(alertBox); // 从文档中移除提示框
}, 1000);
}
</script>
<style>
.copy-btn {
background: linear-gradient(45deg, #ff6b6b, #f94d6a); /* 渐变背景 */
border: none; /* 移除边框 */
color: white; /* 白色文本 */
padding: 10px 20px; /* 按钮内边距 */
text-align: center; /* 文字居中 */
text-decoration: none; /* 移除下划线 */
display: inline-block; /* 使按钮在一行内 */
font-size: 14px; /* 字体大小 */
margin: 4px 2px; /* 外边距 */
cursor: pointer; /* 鼠标指针样式 */
border-radius: 8px; /* 圆角 */
transition: background 0.3s, transform 0.1s; /* 背景色和缩放效果渐变 */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 添加阴影 */
}
.copy-btn:hover {
background: linear-gradient(45deg, #f94d6a, #ff6b6b); /* 悬停时渐变背景 */
}
.copy-btn:active {
transform: scale(0.95); /* 点击时的缩放效果 */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 点击时调整阴影 */
}
.copy-alert {
position: fixed;
top: 50%; /* 垂直居中 */
left: 50%; /* 水平居中 */
transform: translate(-50%, -50%); /* 将元素中心点移到正确的位置 */
background-color: #4CAF50; /* 绿色背景 */
color: white; /* 白色文本 */
padding: 10px 20px; /* 内边距 */
border-radius: 5px; /* 圆角 */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 添加阴影 */
z-index: 1000; /* 确保在最前面 */
font-size: 14px;
display: none; /* 初始状态下隐藏 */
}
</style>
<style>
.t_table {
width: 100%; /* 设置表格的宽度为父容器的 100%，即表格会自动适应父容器的宽度 */
min-width: 600px; /* 设置表格的最小宽度为 600 像素，确保内容即使在父容器宽度较小时也能完整显示 */
table-layout: auto; /* 设置表格布局为自动，即表格列的宽度会根据内容自动调整 */
}
.t_table td {
padding: 4px; /* 设置单元格内容与单元格边框之间的内边距为 4 像素 */
line-height: 1.1; /* 设置单元格内容的行高为 1.1 倍的字体大小，确保内容间距适中 */
border: 1px solid #afbeca; /* 设置单元格的边框为 1 像素实线，颜色为 #afbeca（浅灰色） */
overflow: hidden; /* 当单元格内容过多时，超出部分会被隐藏，防止溢出影响布局 */
}
</style>

复制代码

3、修改手机端的，找到文件/template/default/touch/common/header.htm

将【2】的代码复制进这个文件底部，</head>代码之前，即可

ysx24 · 发表于 2025-1-20 11:37:41

好用，感谢

ysx24 · 发表于 2025-1-20 11:57:44

1、打开文件/source/function/function_discuzcode.php
下面的代码好像不对 x3.5默认模板

[已解决] 手机版表格显示不全怎么办？x3.5

产品服务

开发者服务

使用教程