首页新闻找找看学习计划

关于设置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>
Mr.He多多指教的主页 Mr.He多多指教 | 初学一级 | 园豆:139
提问于:2016-02-25 16:19
< >
分享
所有回答(3)
0

width:100%; 设定对象的宽度占父元素100% width:auto; 根据对象实际大小自适应宽度。个人理解

Ctrl` | 园豆:1906 (小虾三级) | 2016-02-25 16:35

你的回答貌似并不是我提问问题的答案。

支持(0) 反对(0) Mr.He多多指教 | 园豆:139 (初学一级) | 2016-02-25 17:04

@Mr.He多多指教: auto为自适应、内容填充的宽度致使auto有多宽;

100%相当于固定值,不会根据内容填充改变。所以你问的auto、100%就是这个差别;

再不是的话、你继续问

支持(0) 反对(0) Ctrl` | 园豆:1906 (小虾三级) | 2016-02-25 17:54

@g皓皓: auto的值并不是根据内容填充的宽度,来设置width,他是根据父容器的宽度减去自己的padding和margin来作为自己的width,这个我查了,而且做个试验。

支持(0) 反对(0) Mr.He多多指教 | 园豆:139 (初学一级) | 2016-02-25 18:11
0

width:100%; 设定对象的宽度占父元素100%

width:auto; 根据对象实际大小自适应宽度

IT小伙儿 | 园豆:11 (初学一级) | 2016-02-25 16:35

你的回答貌似并不是我提问问题的答案。

支持(0) 反对(0) Mr.He多多指教 | 园豆:139 (初学一级) | 2016-02-25 17:04
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。

mDal | 园豆:202 (菜鸟二级) | 2016-03-03 15:03
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册