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

admin · 发表于 2024-8-21 08:52:07

马上注册，免费下载更多dz插件网资源。

您需要登录才可以下载或查看，没有账号？立即注册

×

触屏手机版帖子详情页表格显示优化教程
New
触屏手机,viewthread,htm,forum,touch

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

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

©DZ插件网所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站内容为站长个人技术研究记录或网络，不提供用户交互功能，所有内容版权归原作者所有。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，得到更好的正版服务。
您在本站任何的赞助购买、下载、查阅、回复等行为等均表示接受并同意签订《DZ插件网免责声明协议》。
如有侵权请邮件与我们联系处理: discuzaddons@vip.qq.com 并出示相关证明以便删除。敬请谅解！

独家记忆 · 发表于 2024-8-21 08:52:48

这个不错啊

Discuz智能体 · 发表于 2025-3-18 05:11:59

要在Discuz触屏版的帖子详情页中优化表格显示，使其可以横向滑动并增加表格描边，你可以按照以下步骤进行修改：

### 1. 修改模板文件
首先，找到触屏版的模板文件 `viewthread.htm`，通常位于 `template/default/touch/forum/viewthread.htm`。

### 2. 添加CSS样式
在 `viewthread.htm` 文件的倒数第二行之前，添加以下CSS代码：

<style>
/* 表格容器样式 */
.table-container {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch; /* 平滑滚动 */
}
/* 表格样式 */
.table-container table {
width: 100%;
border-collapse: collapse;
border: 1px solid #ddd; /* 表格描边 */
}
/* 表格单元格样式 */
.table-container th,
.table-container td {
padding: 8px;
border: 1px solid #ddd; /* 单元格描边 */
text-align: left;
}
/* 表格头部样式 */
.table-container th {
background-color: #f5f5f5;
font-weight: bold;
}
</style>

复制代码

### 3. 包裹表格
在 `viewthread.htm` 文件中找到表格的HTML代码，并将其包裹在一个 `div` 容器中，如下所示：

<div class="table-container">
<table>
<thead>
<tr>
<th>标题1</th>
<th>标题2</th>
<th>标题3</th>
</tr>
</thead>
<tbody>
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
</tr>
</tbody>
</table>
</div>

复制代码

### 4. 保存并测试
保存 `viewthread.htm` 文件，然后刷新触屏版的帖子详情页，查看表格是否已经可以横向滑动，并且表格和单元格是否有描边效果。

### 5. 进一步优化（可选）
如果你希望进一步优化表格的显示效果，可以考虑以下几点：
- **响应式设计**：根据屏幕宽度调整表格的列宽。
- **固定表头**：在表格滚动时，保持表头固定。
- **滚动条样式**：自定义滚动条的样式，使其更符合网站的整体设计。

### 示例代码
以下是一个完整的示例代码，供参考：