Question

html table 设置td的宽度不生效

设置了每个td的宽度 总宽度也相等 为什么显示出来就不一样呢？？？

<table class="mainTable" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3" class="title" >客户基本信息</td>
</tr>
<tr>
<td><input type="text"/></td>
<td>客户ID</td>
<td>客户注册码</td>
</tr>
</table>

css：

.mainTable tr td{
border: 1px solid #000;
text-align: center;
border-top-width: 0;
border-left-width: 0;
}
.mainTable tr:nth-child(1) td:nth-child(1){
width: 60px;
}
.mainTable tr:nth-child(2) td:nth-child(1){
width: 10px;
}
.mainTable tr:nth-child(2) td:nth-child(2){
width: 20px;
}
.mainTable tr:nth-child(2) td:nth-child(3){
width: 30px;
}

为什么显示出来不是10px 20px和30px呢？？？？是不是和input有关系
除了设置cellpadding和cellspacing 还需要其他不为0的默认值吗？？？

Answer 1

　　input有默认宽度的。

　　你写的nth-child貌似不对吧。

.mainTable tr td{
    border: 1px solid #000;
    text-align: center;
    border-top-width: 0;
    border-left-width: 0;
}
.mainTable tr:nth-of-type(1) td:nth-of-type(1){
    width: 60px;
}
.mainTable tr:nth-of-type(2) td:nth-of-type(1){
    width: 10px;
	overflow:hidden;
}
.mainTable tr:nth-of-type(2) td:nth-of-type(2){
    width: 20px;
}
.mainTable tr:nth-of-type(2) td:nth-of-type(3){
    width: 30px;
}

追问

css3里nth-child是没有问题的

重新设置了Input的宽度 现在Input的宽度是正常的

但发现上下左侧都有margin 我设置了margin-left 那上下的margin是怎么来的呢？

而且input的所在的蓝色部分一直往后延伸 是什么呢？？

追答

　　绿色的是padding，蓝色的是td的宽度。
　　上下的margin分别为margin-top和margin-bottom。
　　之所以有padding应该是你其他单元格的高度引起的。