您的位置: 首页  >  IT文章  >  html table 固定宽度有关问题

html table 固定宽度有关问题

分类: IT文章 • 2022-05-05 10:24:12
html table 固定宽度问题
<table width="900" border="0" cellspacing="0" cellpadding="0">
<tr>
      <td style="width:110;">aa</td>
       <td style="width:110;">bb</td>
       <td style="width:110;">bb</td>
       <td style="width:110;">bb</td>
       <td style="width:110;">bb</td>
       <td style="width:110;">bb</td>
       <td style="width:110;">bb</td>
       <td style="width:130;">bb</td>
    </tr>
</table>
这样设置table，列宽是一样的。但是如果我往某个列中插入一个input标签，列宽就不一样了。但是如果用百分比分配列宽又是一样的，这是什么原因啊，求解释
------解决思路----------------------


<!doctype html>

<html>

<head>

    <meta charset="UTF-8">

    <title>test</title>

    <style type="text/css">

        *{ margin:0; padding:0;}

        body{font:12px/1.125 Arial,Helvetica,sans-serif;background:#fff;}

        table{border-collapse:collapse;border-spacing:0;}

        li{list-style:none;}

        fieldset,img{border:0;}

        article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}

        q:before,q:after{content:'';}

        a:focus,input,textarea{outline-style:none;}

        input[type="text"],input[type="password"],textarea{outline-style:none;-webkit-appearance:none;}

        textarea{resize:none}

        address,caption,cite,code,dfn,em,i,th,var{font-style:normal;font-weight:normal;}

        legend{color:#000;}

        abbr,acronym{border:0;font-variant:normal;}

        a{color:#0a8cd2;text-decoration:none;}

        a:hover{text-decoration:underline;}

        .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}

        .clearfix{display:inline-block;}

        .clearfix{display:block;}

        .clear{clear:both;height:0;font:0/0 Arial;visibility:hidden;}

        .none{display:none}

    </style>

</head>

<body>

<table width="900" border="1" cellspacing="0" cellpadding="0">

    <tr>

        <td style="width:110px"><input style="width:100%" type="text"/></td>

        <td style="width:110px;">bb</td>

        <td style="width:110px;">bb</td>

        <td style="width:110px;">bb</td>

        <td style="width:110px;">bb</td>

        <td style="width:110px;">bb</td>

        <td style="width:110px;">bb</td>

        <td style="width:130px;">bb</td>

    </tr>

</table>

</body>

</html>

------解决思路----------------------
把宽度加上单位px

相关推荐