Discuz! 官方交流社區
標題: 手機版表格顯示不全怎么辦?x3.5 [打印本頁]
作者: 鐵板魷魚燒 時間: 2024-8-20 15:12
標題: 手機版表格顯示不全怎么辦?x3.5
(, 下載次數: 52)
如圖所示,插入表格后,顯示不全右邊也看不到,要是可以增加一個表格橫向滑動,能劃過去也行呀,電腦上顯示沒問題
(, 下載次數: 52)
使用的是X3.5,這個問題能不能優化一下呀,可以跟那些代碼高亮一樣,增加一個橫向滑動,再增加個復制按鈕,哪怕是專門一個插件,要花錢購買也可以的
作者: 鐵板魷魚燒 時間: 2024-8-20 15:15
23562 | 1531.41 | 0.064994907 | 月租金 | 4500 | 292.4770817 |
個人所得稅 | 94.25 | 0.004000085 | 稅率 | 0.064994907 | 18.00038197 |
房產稅 | 1413.72 | 0.06 | 稅費/月 | 292.4770817 | 270 |
印花稅 | 11.78 | 0.000499958 | 1年稅金 | 3509.724981 | 2.249809015 |
土地使用稅 | 11.66 | 0.000494865 | 含稅/月 | 4792.477082 | 2.226890756 |
343 | 343 | 0 | 1年租金 | 57509.72498 | 5646 |
這里也試試
作者: buzhaoshan 時間: 2024-8-20 15:21
試試excel轉成html,編輯框里直接粘貼代碼看卡
作者: 鐵板魷魚燒 時間: 2024-8-20 15:25
不可以的,如下
<table style="width: 50%;">
<tr>
<td style="text-align: right; width: 107px;">23562</td>
<td style="text-align: right; width: 80px;">1531.41</td>
<td style="text-align: right; width: 80px;">0.064994907</td>
<td style="width: 80px;">月租金</td>
<td style="text-align: right; width: 116px;">4500</td>
<td style="text-align: right; width: 116px;">292.4770817</td>
</tr>
<tr>
<td>個人所得稅</td>
<td style="text-align: right;">94.25</td>
<td style="text-align: right;">0.004000085</td>
<td>稅率</td>
<td style="text-align: right;">0.064994907</td>
<td style="text-align: right;">18.00038197</td>
</tr>
<tr>
<td>房產稅</td>
<td style="text-align: right;">1413.72</td>
<td style="text-align: right;">0.06</td>
<td>稅費/月</td>
<td style="text-align: right;">292.4770817</td>
<td style="text-align: right;">270</td>
</tr>
<tr>
<td>印花稅</td>
<td style="text-align: right;">11.78</td>
<td style="text-align: right;">0.000499958</td>
<td>1年稅金</td>
<td style="text-align: right;">3509.724981</td>
<td style="text-align: right;">2.249809015</td>
</tr>
<tr>
<td>土地使用稅</td>
<td style="text-align: right;">11.66</td>
<td style="text-align: right;">0.000494865</td>
<td>含稅/月</td>
<td style="text-align: right;">4792.477082</td>
<td style="text-align: right;">2.226890756</td>
</tr>
<tr>
<td>343</td>
<td>343</td>
<td style="text-align: right;">0</td>
<td>1年租金</td>
<td style="text-align: right;">57509.72498</td>
<td>5646</td>
</tr>
</table>
作者: buzhaoshan 時間: 2024-8-20 15:31
width 別給定值試試
作者: 鐵板魷魚燒 時間: 2024-8-20 15:33
<table >
<tr>
<td style="width:107px; text-align:right;">23562</td>
<td style="width:80px; text-align:right;">1531.41</td>
<td style="width:80px; text-align:right;">0.064994907</td>
<td style="width:80px;">月租金</td>
<td style="width:116px; text-align:right;">4500</td>
<td style="width:116px; text-align:right;">292.4770817</td>
</tr>
<tr>
<td>個人所得稅</td>
<td style="text-align:right;">94.25</td>
<td style="text-align:right;">0.004000085</td>
<td>稅率</td>
<td style="text-align:right;">0.064994907</td>
<td style="text-align:right;">18.00038197</td>
</tr>
<tr>
<td>房產稅</td>
<td style="text-align:right;">1413.72</td>
<td style="text-align:right;">0.06</td>
<td>稅費/月</td>
<td style="text-align:right;">292.4770817</td>
<td style="text-align:right;">270</td>
</tr>
<tr>
<td>印花稅</td>
<td style="text-align:right;">11.78</td>
<td style="text-align:right;">0.000499958</td>
<td>1年稅金</td>
<td style="text-align:right;">3509.724981</td>
<td style="text-align:right;">2.249809015</td>
</tr>
<tr>
<td>土地使用稅</td>
<td style="text-align:right;">11.66</td>
<td style="text-align:right;">0.000494865</td>
<td>含稅/月</td>
<td style="text-align:right;">4792.477082</td>
<td style="text-align:right;">2.226890756</td>
</tr>
<tr>
<td>343</td>
<td>343</td>
<td style="text-align:right;">0</td>
<td>1年租金</td>
<td style="text-align:right;">57509.72498</td>
<td>5646</td>
</tr>
</table>
作者: 鐵板魷魚燒 時間: 2024-8-20 15:34
23562 | 1531.41 | 0.064994907 | 月租金 | 4500 | 292.4770817 |
個人所得稅 | 94.25 | 0.004000085 | 稅率 | 0.064994907 | 18.00038197 |
房產稅 | 1413.72 | 0.06 | 稅費/月 | 292.4770817 | 270 |
印花稅 | 11.78 | 0.000499958 | 1年稅金 | 3509.724981 | 2.249809015 |
土地使用稅 | 11.66 | 0.000494865 | 含稅/月 | 4792.477082 | 2.226890756 |
343 | 343 | 0 | 1年租金 | 57509.72498 | 5646 |
作者: 鐵板魷魚燒 時間: 2024-8-20 15:35
這個是改變不了的,求大佬做一個表格橫向滑動,帶復制按鈕的插件
作者: 鐵板魷魚燒 時間: 2024-8-20 16:14
# Create the HTML table from the provided data
html_content = """
<table border="1" cellspacing="0" cellpadding="5">
<tr>
<td width="107" align="right">23562</td>
<td width="80" align="right">1531.41</td>
<td width="80" align="right">0.064994907</td>
<td width="80">月租金</td>
<td width="116" align="right">4500</td>
<td width="116" align="right">292.4770817</td>
</tr>
<tr>
<td>個人所得稅</td>
<td align="right">94.25</td>
<td align="right">0.004000085</td>
<td>稅率</td>
<td align="right">0.064994907</td>
<td align="right">18.00038197</td>
</tr>
<tr>
<td>房產稅</td>
<td align="right">1413.72</td>
<td align="right">0.06</td>
<td>稅費/月</td>
<td align="right">292.4770817</td>
<td align="right">270</td>
</tr>
<tr>
<td>印花稅</td>
<td align="right">11.78</td>
<td align="right">0.000499958</td>
<td>1年稅金</td>
<td align="right">3509.724981</td>
<td align="right">2.249809015</td>
</tr>
<tr>
<td>土地使用稅</td>
<td align="right">11.66</td>
<td align="right">0.000494865</td>
<td>含稅/月</td>
<td align="right">4792.477082</td>
<td align="right">2.226890756</td>
</tr>
<tr>
<td>343</td>
<td>343</td>
<td align="right">0</td>
<td>1年租金</td>
<td align="right">57509.72498</td>
<td>5646</td>
</tr>
</table>
"""
# Save the HTML content to a file
file_path = '/mnt/data/table_output.html'
with open(file_path, 'w', encoding='utf-8') as file:
file.write(html_content)
file_path
作者: 科站網 時間: 2024-8-20 17:31
https://addon.dismall.com/plugins/tshuz_mtablepro.html
作者: 文強 時間: 2024-8-20 17:44
或許你可以試試我這個方法------https://boonkiong.com/thread-3699-1-1.html
作者: 鐵板魷魚燒 時間: 2024-8-20 18:42
這個方法確實不錯,就是如果表格特別寬,全都都擠到這里,也很麻煩看不清,能夠水平往右邊滑動看到更多,其實效果更好,有沒有想法修改下
作者: qzuser1212 時間: 2024-8-20 22:34
在模板目錄下 如默認模板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[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
用編輯器自帶的試試看,如果不行的話,只能單獨對手機版做頁面優化。
作者: 鐵板魷魚燒 時間: 2024-8-23 15:20
感謝各位的回答,我組織了一下,這個問題修改下代碼就好了,也希望官方可以把這個代碼整合進下一個版本更新!
我的站點測試鏈接: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
好用,感謝
作者: ysx24 時間: 2025-1-20 11:57
1、打開文件/source/function/function_discuzcode.php
下面的代碼好像不對 x3.5默認模板
(, 下載次數: 16)
歡迎光臨 Discuz! 官方交流社區 (http://www.9999xn.com/) |
Powered by Discuz! W1.0 |