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>

处理后效果如下

相关推荐
Mr Xu_2 小时前
前端开发中CSS代码的优化与复用:从公共样式提取到CSS变量的最佳实践
前端·css
Lee川5 小时前
CSS盒模型实战:用代码透视 `border-box`与 `content-box`的天壤之别
css
开开心心就好7 小时前
发票合并打印工具,多页布局设置实时预览
linux·运维·服务器·windows·pdf·harmonyos·1024程序员节
哈里谢顿10 小时前
CSS 入门完全指南:从零构建你的第一个样式表
css
. . . . .10 小时前
CSS 编写与管理范式 - Tailwind和CSS-in-JS
css
RFCEO1 天前
前端编程 课程十六、:CSS 盒子模型
css·前端基础课程·css盒子模型·css盒子模型的组成·精准控制元素的大小和位置·css布局的基石·内边距(padding)
夏幻灵1 天前
CSS三大特性:层叠、继承与优先级解析
前端·css
会编程的土豆2 天前
新手前端小细节
前端·css·html·项目
珹洺2 天前
Bootstrap-HTML(二)深入探索容器,网格系统和排版
前端·css·bootstrap·html·dubbo
BillKu2 天前
VS Code HTML CSS Support 插件详解
前端·css·html