css table自动布局下<td>宽度计算

关于td的宽度在table自动布局情况下的变化,好像并不像CSS权威指南说的那样。经过一番测试计算最终发现计算方法如下:
在css权威指南中对于单元格宽度计算和设置方法如下:
这里写图片描述
这里写图片描述
这里写图片描述

测试用例:
1.表宽度为auto时

<table class="test-tdwidth">
                    <tr>
                        <td>r1-c1</td>
                        <td>r1-c2</td>
                        <td>r1-c3</td>
                        <td>r1-c4</td>
                        <td>r1-c5</td>
                    </tr>
                    <tr>
                        <td>第二行</td>
                        <td>很长很长很长很长的一句话</td>
                        <td>俩字</td>
                        <td>1234567</td>
                        <td>文字+符号</td>
                    </tr>
            </table>

CSS:

.test-tdwidth{
    margin-top: 30px;
    border: 2px solid black;
    border-spacing: 0;
}
.test-tdwidth td{
    padding:0;
    border: 1px solid black;
}

显示的效果为:
这里写图片描述

明显,在自动宽度情况下,单元格的宽度是乖乖的按照标准来做的。当我们给表设定一个宽度的时候,效果却不尽人意。

2.表宽度为固定宽度
我在css里给表的宽度增加50px(418+50+4=472px);那么对于5列的表格,根据css标准,应该是每列增加10px的宽度。
这里写图片描述

CSS:

.test-tdwidth{
    margin-top: 30px;
    border: 2px solid black;
    border-spacing: 0;
    width: 472px;
}
.test-tdwidth td{
    padding:0;
    border: 1px solid black;
}

然而效果却不是这样的:
这里写图片描述

明显的,每列增加的宽度不一样,而且宽度大的单元格增加得多。经过计算,发现单元格增加宽度的原则是:
表增加的宽度(计算宽度与列宽 边宽和单元格间隔之和的差值)会按每个单元格占原来表宽度的比例分配,就是原本宽度大的分配得多,宽度少的分配得少。

总结:
表格单元格的宽度计算方法核心在于最小 最大单元格宽度的计算。但是对于超过列宽 边宽和单元格间隔之和的值部分的分配却不是平均分配,而是按比例分配(也许是设计者觉得原本大的单元格需要更多的关爱)

PS:在测试过程中,发现一个很有趣的东西,就是固定宽度的表格中
的max-width属性看起来不起作用(只是看起来)。在上列中,给单元格设定最大宽度限制。

.test-tdwidth{
    margin-top: 30px;
    border: 2px solid black;
    border-spacing: 0;
    width: 472px;
}
.test-tdwidth td{
    padding:0;
    border: 1px solid black;
    max-width: 150px;
}

结果这里写图片描述

这明显有个坏家伙不停指令,宽度竟然达到了189px;
但是,当我把表的固定宽度改成自动宽度时

.test-tdwidth{
    margin-top: 30px;
    border: 2px solid black;
    border-spacing: 0;
    width: auto;
}
.test-tdwidth td{
    padding:0;
    border: 1px solid black;
    max-width: 150px;
}

它却乖乖的了这里写图片描述
ps;多出来的2px是border。

经过一轮计算和思考,发现max-width(min-width)影响的是一列的最大(小)单元格宽度,而不是限定单元格的最终宽度。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值