ECSide标签<ec:table>表格对不齐问题处理

现象如下图

处理方式如下

javascript 复制代码
<ec:table styleClass="dynamic-table"> /* 为表格添加如下样式 */

</ec:table>



<style>
.dynamic-table {
    table-layout: fixed !important; /* 关键:防止列宽自适应破坏布局 */
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 0 auto; /* 居中显示 */
    white-space: normal !important; /* 确保子元素可换行 */
}

.dynamic-table th, 
.dynamic-table td {
    border: 1px solid #ddd !important; /* 统一边框 */
    padding: 8px !important;           /* 内边距一致 */
    text-align: center !important;    /* 文本居中 */
    word-wrap: break-word !important;  /* 长文本换行 */
    overflow-wrap: break-word !important; /* 现代浏览器优先 */
    max-width: 100% !important; /* 强制内容最大宽度不超过单元格 */
    text-wrap-mode: wrap;
}
</style>

处理后效果如下

相关推荐
siriuuus3 小时前
MySQL 的 MyISAM 与 InnoDB 存储引擎的核心区别
mysql·1024程序员节
东方佑3 小时前
UniVoc:革新LLM训练与推理的Tokenizer,实现256倍压缩与90%压缩率
1024程序员节
没有感情的robot4 小时前
使用ffmpeg裁剪视频
1024程序员节
Dobby_054 小时前
【Go】C++ 转 Go 第(四)天:结构体、接口、反射、标签 | 面向对象编程
vscode·golang·1024程序员节
eguid_14 小时前
【HLS】Java实现统计HLS的m3u8清单中所有ts切片的视频持续时长
java·音视频·hls·1024程序员节·m3u8·ts时长
snpgroupcn4 小时前
INEOS 能源携手 SNP 完成 SAP ECC 至 S/4HANA 战略升级 2024 年 10 月英国上线
1024程序员节
接着奏乐接着舞4 小时前
react nextjs 项目部署
1024程序员节
皓月Code4 小时前
第三章、React项目国际化介绍(`react-i18next`)
前端·javascript·react.js·1024程序员节
加蓓努力我先飞4 小时前
Vue3小兔鲜-(二)
前端·javascript·css·vue3