table、td宽度失效-table布局的问题

24 篇文章 0 订阅

    项目中table布局还是比较常用的,遇到了一个table宽度失效的问题,先上代码:

<div style="width:800px;margin: 60px;">
    <table style="width: 100%;max-width: 100%;">
        <tbody>
            <tr style="max-width: 900px;overflow: hidden;">
                <td style="max-width: 1000px;" >
                    <div style="width: 1100px;">
                        <p style="width: 1200px;">测试文本rem由来:                              
                        </p>
                    </div>
                </td>
                <td>rem由来:font size of the root element,那么rem是个单位,
                </td>
                <td>rem由来:font size of the root element,那么rem是个单位,
                </td>
            </tr>
            <tr style="max-width: 900px;overflow: hidden;">
                <td style="max-width: 1000px;" >
                    <div style="width: 1100px;">
                        <p style="width: 1200px;">测试文本rem由来:                              
                        </p>
                    </div>
                </td>
                <td>rem由来:
                </td>
                <td>rem由来:
                </td>
            </tr>
        </tbody>
    </table>
</div>

      此时td的宽度还是自身设置的宽度,而tr设置的宽900px和table本身设置的宽度100%都失效了,变成了1167px;它们的宽既不是子元素中最宽的1200px;也不是它们本身设置的宽度,这么来看是浏览器对它们的宽做了自动分配处理

      我个人的理解是tr本身就是代表一行,所以不会通过换行的方式来显示超过本身宽度的元素,于是出现了下面图的显示效果;有时候虽然td里面的div并没有手动设置宽度,但是还是偶尔莫名其妙的把tr撑开了。。。

table宽度设置失效

借鉴了李万宝的博客,td的宽度有以下几种情形(假定有table宽600px,内有3个td):

1、table设置了宽度,td未设置宽度,td平分table的宽度,各单元格会根据各个内容长度的比例来均分table的宽度;

2、定义的表格宽为600px,第一和第三的宽度为400px,此时,系统会先计算第二个实际的宽度,假设第二个是40px,然后第一和第三再按比例均分剩余宽度

3、 如果td内容宽度不足table设置的宽,会自动补齐。如:第一个100px,第三个200px,第二个td自然是:600-100-200=300px;

4、 百分比和数字同时使用,百分比优先级高,将百分比的宽度计算后,再将剩余的宽度平分或者按照设置的宽的值再分配,下面结构中去除了border和padding后, td1 的最终宽度为100px,td2的宽度为296px,td3的宽度为196px;

<table style="width:600px; background-color:blue" >
    <tr>
         <td width="200px">1</td>
         <td width="50%">2</td>
         <td width="400px">3</td>
     </tr> 
 </table> 

5、设置td的宽度为100px,如果td内容是纯文本,超过100px会在td里换行,但是里面的div设置为400px,则会撑宽td的默认值,结论:table、td定义的宽度是默认宽度,实际宽度由内容决定

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值