今天在工作中遇到很头疼的问题,本来table中的td的宽度都是一致的,也是对其的。后来发现我加了一个很出名的日历控件My97DatePicker之后,上下的2个td不管怎么调,设置百分比啊,设置像素啊,设置table的布局方式都没能让上下2个td宽度一致对齐,table的布局方式(table-layout:fixed;
):auto 默认列宽度由单元格内容设定;fixed:列宽由表格宽度和列宽度设定。其实上下2个td宽度不一致的原因是因为加了日历控件的表格宽度可能是默认是用的控件自己设置的宽度。比如同一行中有2个td,只需要设置其中一个td的宽度即可,此外td的宽度也会随着td里面的数据长度的变化而发生改变。
通过网上查阅资料后才发现,<input type="text"> 输入框长度默认为152px,故在设置td宽度的时候,为了易于控件,td的宽度至少要大于152px;也就是说text:默认宽度为:152px;既然说到默认的宽度是152px的话,那我在td中的<input type='text'/>中指定text的宽度为152px的话,会产生啥样的效果呢。见证奇迹的时刻来了,当我这样修改的时候<input type ="text" style=" width : 152px;">,上下2个td的宽度果然差不多一致了,当然还不够完美,因为前面说了,加了控件的话,最好设置宽度大于152px,换成154px(这里得具体情况具体对待)刷新页面,上下2个td的宽度几乎是一致的,起码肉眼看起来没啥差别了,各位各位小伙伴们,你们觉得呢?附上代码跟图片
<tr> <td align="right" width="15%">配板号:</td> <td align="left"><input type="text" id="pbnumber" class="easyui-validatebox" validType="pbnumber" required="true" missingMessage="配板号不能为空"/> </td> </tr> <tr> <td align="right" width="15%">出发时间:</td> <td align="left"><input type="text" style="width: 154px;" class="Wdate" id="departtime" onfocus="WdatePicker({isShowClear:false,readOnly:true,position:{left:90,top:-2}})" /> </td> </tr>
以上纯碎为个人在工作终于到一个小问题的解决办法,如有不对或者不正确的地方,欢迎各位指正。