LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

table中的td设置固定宽度没有效果,如何解决?

admin
2020年4月13日 20:54 本文热度 3287

在做项目中,设置了table中td的宽度的百分比,但是并没有起作用,这是因为table-layout行的宽度默认是automatic(列宽度由单元格内容设定。)

这时只需要设置table如下样式即可:
table{table-layout:fixed; word-break:break-all;}

table-layout 有三个属性:
automatic(列宽度由单元格内容设定)
fixed(列宽由表格宽度和列宽度设定)
inherit(规定应该从父元素继承 table-layout 属性的值)


该文章在 2020/4/13 21:02:19 编辑过

全部评论1

admin
2020年4月13日 20:58
1、实现table细边框,设置如下css:
table,table td,table th{border:1px solid #ff0000;border-collapse:collapse;}

2、table表格宽度固定,同时td内容过长也不会被撑开,设置如下css:
table{table-layout:fixed;word-break:break-all;}

3、在上面css设置下,td的width可以设置固定值也可设置百分比,达到某些列宽度固定,某些列按比例自适应的效果:

<html>
< head>
    <style>
        table,table td,table th{border:1px solid #ff0000;border-collapse:collapse;}
    </style>
< /head>
< body>
    <table width="50%" style="table-layout:fixed;word-break:break-all;background:#f2f2f2">
        <tr>
            <td width="50">50px</td>
            <td width="50%">50% aaaaaaabbbbbbbccccccc</td>
            <td width="50%">50% aaaaaaabbbbbbbccccccc</td>
            <td width="50">50px</td>
            <td width="100">100px</td>
        </tr>
        <tr>
            <td>50px</td>
            <td>50% aaaaaaabbbbbbbccccccc</td>
            <td>50% aaaaaaabbbbbbbccccccc</td>
            <td>50px</td>
            <td>100px</td>
        </tr>
    </table>
< /body>
< /html>

效果:

50px 50% aaaaaaabbbbbbbccccccc 50% aaaaaaabbbbbbbccccccc 50px 100px
50px 50% aaaaaaabbbbbbbccccccc 50% aaaaaaabbbbbbbccccccc 50px 100px

该评论在 2020/4/13 22:49:52 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2024 ClickSun All Rights Reserved