easyui合并列，每列大小会相等，如何处理？

最新推荐文章于 2023-04-16 11:04:51 发布

masterLSC

最新推荐文章于 2023-04-16 11:04:51 发布

阅读量401

点赞数 1

分类专栏：烂笔头文章标签： easyui 列合并调整宽度

本文链接：https://blog.youkuaiyun.com/masterLSC/article/details/77737395

版权

烂笔头专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何在使用EasyUI框架时定义复杂的表格表头，并通过调整表头宽度实现更好的布局效果。针对合并后的表头宽度不均的问题，提供了一种有效的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用easyui定义一个复杂的表头，合并后3列的表头

<thead>
    <tr>
        <th field="name1" width="50" rowspan="2">Col 1</th>
        <th field="name2" width="50" rowspan="2">Col 2</th>
        <th field="name3" width="50" rowspan="2">Col 3</th>
        <th colspan="3">Details</th>
    </tr>
    <tr>
        <th field="name4" >Col 4</th>
        <th field="name5" >Col 5</th>
        <th field="name6" >Col 6</th>
    </tr>                          
</thead>

这样会出现一个问题就是合并后的三列的宽度是相等的，而且添加width属性也好像不起作用，有一个方法亲测有用，在表头前面设置每一列的宽度

<thead>
    <col style="width: 10%" />
    <col style="width: 10%" />
    <col style="width: 25%" />
    <col style="width: 5%" />
    <col style="width: 8%" />
    <col style="width: 15%" />
    <tr>
        <th field="name1" width="50" rowspan="2">Col 1</th>
        <th field="name2" width="50" rowspan="2">Col 2</th>
        <th field="name3" width="50" rowspan="2">Col 3</th>
        <th colspan="3">Details</th>
    </tr>
    <tr>
        <th field="name4" >Col 4</th>
        <th field="name5" >Col 5</th>
        <th field="name6" >Col 6</th>
    </tr>                          
</thead>