触屏手机版帖子详情页表格显示优化教程
可以横向滑动显示，增加表格描边修改教程：
在模板目录下 如默认模板template/default/touch/forum/viewthread.htm
文件倒数第二行增加以下代码（<!--{template common/footer}-->之前）
<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.cells;
var cellCount = cells.length;
var minCellWidth = 100; // 最小列宽
// 设置每列的宽度
for (var i = 0; i < cellCount; i++) {
cells.style.minWidth = minCellWidth + 'px';
cells.style.width = (100 / cellCount) + '%';
}
// 处理所有单元格
var allCells = table.getElementsByTagName('td');
for (var i = 0; i < allCells.length; i++) {
allCells.style.whiteSpace = 'nowrap';
allCells.style.overflow = 'hidden';
allCells.style.textOverflow = 'ellipsis';
}
});
}
// 在页面加载完成和窗口大小改变时调用此函数
window.addEventListener('load', optimizeTables);
window.addEventListener('resize', optimizeTables);
</script>
页:
[1]