首页 前端知识 Html5 table 表格内容超出撑大单元格 解决方法

Html5 table 表格内容超出撑大单元格 解决方法

2024-06-07 12:06:43 前端知识 前端哥 234 992 我要收藏

所用知识点 :   table-layout: fixed 

首先我们先用代码绘制一个表格

<body>
    <table border="1px dashed" width="500px" height="400px">
        <caption>表格的合并:内容超出</caption>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td colspan="2"></td>
            <td colspan="2"></td>
            <td colspan="2"></td>
        </tr>
    </table>
</body>

实现效果为这样

 但是如果表格里面的某一个单元格里面的内容过多的时候会把原本大小的单元格撑大   会把别的单元格挤掉

像下图这样

 所以遇到这种情况 我们只需要在  table 中加入        table-layout: fixed        就可以啦

 <table border="1px dashed" style="table-layout: fixed;">

 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/11267.html
标签
评论
发布的文章

1.10 Unity中的数据存储 JSON

2024-06-13 21:06:30

JSON 数据格式化方法

2024-06-13 21:06:26

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!