首页 新闻 赞助 找找看

Html 嵌套table 后单元格中 input文本框无法对齐

0
悬赏园豆:20 [已解决问题] 解决于 2013-10-30 17:06

可以看到文本框没有对齐,项目中的代码不太好单独的取出来,于时整了一个小demo

<html>
    <head></head>
    <body>
        <table style="width:300;cellpadding:0;cellspacing:0;">
            <tr>
                <td width="100">
                    <input type="text" style="width:100%" />
                </td>
                <td width="100">
                    <input type="text" style="width:100%" />
                </td>
            </tr>
            <tr>
                <td width="100">
                    <input type="text"  style="width:100%"/>
                </td>
                <td width="100">
                    <table style="width:100%;cellpadding:0;cellspacing:0;">
                        <tr>
                            <td width="100%"><input type="text" style="width:100%"/></td>
                            <td><label width="30">label</label></td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td width="100">
                    <input type="text"  style="width:100%"/>
                </td>
                <td width="100">
                    <input type="text"  style="width:100%"/>
                </td>
            </tr>
        </table>
    </body>
</html>

直接复制,然后另存为网页格式就可以查看到效果

aehyok的主页 aehyok | 小虾三级 | 园豆:1212
提问于:2013-10-30 12:13
< >
分享
最佳答案
0

aehyok说的没错:

 1                     <table style="width:100%;cellpadding:0;cellspacing:0;">
 2                     <style>
 3                     body,th,td{margin:0;padding:0}
 4                     table{border-collapse:collapse;border-spacing:0}
 5                     </style>
 6                         <tr>
 7                             <td width="100%"><input type="text" style="width:100%"/></td>
 8                             <td><label width="30">label</label></td>
 9                         </tr>
10                     </table>

 

 


 

收获园豆:8
beyondchina | 小虾三级 |园豆:680 | 2013-10-30 13:44
其他回答(4)
0
   <table style="width:100%;cellpadding:0;cellspacing:0;">
                        <tr>
                            <td width="100%"><input type="text" style="width:100%"/></td>
                            <td><label width="30">label</label></td>
                        </tr>
                    </table>

这段中把table加上样式border-spacing:0  因为用了table 之后table本身的边框也是要占用位置的,

收获园豆:4
Zery | 园豆:6151 (大侠五级) | 2013-10-30 12:27
0
<style>
body,th,td{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}

</style>
aehyok | 园豆:1212 (小虾三级) | 2013-10-30 13:02
0

<style>
table{border-collapse:collapse; border-spacing:0; border:0px; display:table;}

td { padding: 7px 5px; border: 1px solid #cef; display: table-cell; vertical-align: inherit; }
</style>

收获园豆:4
飞扬的尘埃 | 园豆:1318 (小虾三级) | 2013-10-30 13:06
0

<table border=0 cellpadding=0 cellspacing=0 style="width:300;"> 这样写就没问题了 你把border=0 cellpadding=0 cellspacing=0属性写在外边 别卸载style里面 我试过了 可以对齐

收获园豆:4
wolfy | 园豆:2636 (老鸟四级) | 2013-10-30 13:32
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册