关于设置table的width为auto和100%的问题
0
悬赏园豆：15
[待解决问题]
我用下面的代码分别设置width为auto和100%，但是得到的结果不相同，谁能帮我解释一下。我觉得在没有padding也没有margin的时候，auto和100%应该一样的呀，如果大家不知道，帮忙推荐一下，让大神出来帮帮忙
设置为auto： alert的结果为274px
<div style="width:500px;"> <table style="border:solid;width:auto ;" id="t1"> <tr> <td style="width:80px;border:solid">1</td> <td style="width:160px;border:solid">1</td> </tr> <tr> <td style="width:80px;border:solid">2</td> <td style="width:160px;border:solid">2</td> </tr> <tr> <td style="width:80px;border:solid">3</td> <td style="width:160px;border:solid">3</td> </tr> <tr> <td style="width:80px;border:solid">4</td> <td style="width:160px;border:solid">4</td> </tr> </table> </div>
设置为100%的结果为500px；
<div style="width:500px;"> <table style="border:solid;width:100%;" id="t1"> <tr> <td style="width:80px;border:solid">1</td> <td style="width:160px;border:solid">1</td> </tr> <tr> <td style="width:80px;border:solid">2</td> <td style="width:160px;border:solid">2</td> </tr> <tr> <td style="width:80px;border:solid">3</td> <td style="width:160px;border:solid">3</td> </tr> <tr> <td style="width:80px;border:solid">4</td> <td style="width:160px;border:solid">4</td> </tr> </table> </div>
所有回答(3)
0
width:100%; 设定对象的宽度占父元素100% width:auto; 根据对象实际大小自适应宽度。个人理解
你的回答貌似并不是我提问问题的答案。
@Mr.He多多指教: auto为自适应、内容填充的宽度致使auto有多宽；
100%相当于固定值，不会根据内容填充改变。所以你问的auto、100%就是这个差别；
再不是的话、你继续问
@g皓皓: auto的值并不是根据内容填充的宽度，来设置width，他是根据父容器的宽度减去自己的padding和margin来作为自己的width，这个我查了，而且做个试验。
0
在浏览器上table标签的display只有table,inline-table,none三个值（尝试将display修改inline浏览器上显示为inline-table，除none外其余值后在浏览器上显示是table）
div设置了display:table后将widh设为auto也是这样
个人认为 是因为display:table这个样式导致的width:auto没有按照父容器width和自身padding来设置width，而是通过自身内容和padding来设定width。
