css中table-layout:fixed的应用详解

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了css中table-layout:fixed的应用详解，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2616字，纯文字阅读大概需要4分钟。

内容图文

当表格中有很长的英文时，如果没有设置table-layout:fixed 或者 word-break:break-all，则单元格显示的宽度不是我们设置的宽度，如下：

<style>

    table{border:2px solid #ccc;width: 100%;text-align: center;border-collapse:collapse;/*table-layout: fixed;*/}
    td,th{height: 30px;border:2px solid #ccc;/*word-break: break-all;*/}

</style>
<table width="400" border="1" id="table1">
   <tr> 
      <td>3</td>
      <td width="10%">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
      <td width="20%">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
   </tr>
   <tr>
       <td>3</td>
       <td>4</td>
       <td>5</td>
   </tr>
</table>

上面代码中给table元素添加 table-layout: fixed; 或者给td添加 word-break: break-all ，都可以达到表格安装我们设置的宽度显示：

table{border:2px solid #ccc;width: 100%;text-align: center;border-collapse:collapse;table-layout: fixed;}
td,th{height: 30px;border:2px solid #ccc;/*word-break: break-all;*/}

table{border:2px solid #ccc;width: 100%;text-align: center;border-collapse:collapse;/*table-layout: fixed;*/}
td,th{height: 30px;border:2px solid #ccc;word-break: break-all;}

应用场景二：

css的省略号的一般写法:

white-space: nowrap; overflow: hidden; text-overflow: ellipsis;

当你想在table中应用省略号：

<style>
    *{padding:0;margin:0;font-size: 12px;color: #333}
    li{list-style: none;}

    table{border:2px solid #ccc;width: 100%;text-align: center;border-collapse:collapse;}
    td,th{height: 30px;border:2px solid #ccc;word-break: break-all;}

    .ellipsis{white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
</style>

<table width="400" border="1" id="table1">
        <tr>
            <td>3</td>
            <td class="ellipsis" width="10%">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td width="40%">5</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
</table>

结果完全不是我们想要的：

解决方法：添加 table-layout: fixed;

<style>
    *{padding:0;margin:0;font-size: 12px;color: #333}
    li{list-style: none;}

    table{border:2px solid #ccc;width: 100%;text-align: center;border-collapse:collapse;table-layout: fixed;}
    td,th{height: 30px;border:2px solid #ccc;word-break: break-all;}

    .ellipsis{white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
</style>

<table width="400" border="1" id="table1">
        <tr>
            <td>3</td>
            <td class="ellipsis" width="10%">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td width="40%">5</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
</table>

效果完全是我们想要的：

上面代码均兼容ie6+

以上就是css中table-layout:fixed的应用详解的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的css中table-layout:fixed的应用详解全部内容，希望文章能够帮你解决css中table-layout:fixed的应用详解所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端