JiXinHui
/
YingXingAI
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 优化表格样式，移除水平滚动并调整列宽，增强内容显示效果

This commit is contained in:
yangzhe 2025-07-15 14:53:34 +08:00
parent 4b4f65845f
commit da1e52aba5
1 changed files with 25 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
components/markdown-viewer/markdown-viewer.vue
View File

@ -693,9 +693,10 @@ export default {
border-collapse: collapse !important;
width: 100% !important;
margin: 0 !important;
table-layout: fixed !important;
table-layout: fixed !important; /* 使用固定表格布局 */
border: 1px solid #e0e0e0 !important;
font-size: 24rpx !important; /* 稍微减小字体大小，适应移动端 */
overflow-x: visible !important; /* 移除溢出隐藏 */
}
.markdown-container >>> table th,
@ -703,10 +704,13 @@ export default {
border: 1px solid #e0e0e0 !important;
padding: 8rpx 10rpx !important; /* 减小内边距 */
text-align: left !important;
word-break: break-word !important;
word-break: break-word !important; /* 确保长文本会自动换行 */
white-space: normal !important;
vertical-align: middle !important;
min-width: 80rpx !important; /* 设置最小宽度 */
max-width: none !important; /* 移除最大宽度限制 */
width: auto !important; /* 使列宽自动调整 */
overflow-wrap: break-word !important; /* 确保长单词会换行 */
}
.markdown-container >>> table th {
@ -723,20 +727,19 @@ export default {
background-color: #f0f0f0 !important;
}
/* 表格容器，使表格可以水平滚动 */
/* 表格容器 - 移除水平滚动 */
.markdown-container >>> .table-container {
width: 100% !important;
overflow-x: auto !important;
margin: 16rpx 0 !important;
-webkit-overflow-scrolling: touch !important; /* 为iOS设备提供平滑滚动 */
position: relative !important;
overflow-x: visible !important; /* 移除水平滚动 */
margin: 16rpx 0 30rpx !important; /* 增加底部边距，与下方内容分开 */
display: block !important;
}
/* 自定义表格类 */
/* 表格整体显示 */
.markdown-container >>> .custom-table {
min-width: 100% !important;
border-spacing: 0 !important;
width: 100% !important;
table-layout: fixed !important; /* 固定布局 */
overflow: visible !important; /* 显示所有内容 */
}
/* 表格标题 */
@ -747,4 +750,16 @@ export default {
text-align: center !important;
color: #333333 !important;
}
/* 分隔线样式优化 */
.markdown-container >>> hr {
display: block !important;
height: 2rpx !important;
border: 0 !important;
border-top: 2rpx solid #e0e0e0 !important;
margin: 24rpx 0 !important; /* 增加上下边距 */
padding: 0 !important;
clear: both !important;
background-color: #e0e0e0 !important;
}
</style>