问题描述:当我们使用css对table中的td设置宽度的时候,td的宽度还是对于table的宽度自适应,没有达到设置宽度的效果。
<style type="text/css">
table {
border: 1px solid #ddd;
font: 13px/25px "微软雅黑";
table-layout: fixed;
background-color: #fff;
}
table td {
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
overflow: hidden;
}
.td0, .td1 { width: 20px; text-align: center;}
.td2, .td4 { width: 80px; text-align: center;}
.td3, .td5 { width: 130px;}
</style>
<table cellspacing="0">
<tbody>
<tr>
<td rowspan="8" colspan="1" class="td0">交易双方信息</td>
<tr>
<td rowspan="4" colspan="1" class="td1">融出方</td>
<tr>
<td rowspan="1" colspan="1" class="td2">名称</td>
<td rowspan="1" colspan="3">XXXX股份有限公司</td>
</tr>
<tr>
<td rowspan="1" colspan="1" class="td2">场外结算<br>账号信息</td>
<td rowspan="1" colspan="3">
户名: XXXX股份有限公司<br>
账号: XXXXXXXXXXXXXX225541<br>
开户行: 中国工商银行广州市第一支行
</td>
</tr>
<tr>
<td rowspan="1" colspan="1" class="td2">证券账户</td>
<td rowspan="1" colspan="3">深圳:XXXXXXXXX 上海:XXXXXXXXXX</td>
</tr>
</tr>
<tr>
<td rowspan="3" colspan="1" class="td1">融入方</td>
<tr>
<td rowspan="1" colspan="1" class="td2">客户名称</td>
<td rowspan="1" colspan="1" class="td3"></td>
<td rowspan="1" colspan="1" class="td4">证件号码</td>
<td rowspan="1" colspan="1" class="td5"> </td>
</tr>
<tr>
<td rowspan="1" colspan="1">资金账号</td>
<td rowspan="1" colspan="1"></td>
<td rowspan="1" colspan="1">证券账户</td>
<td rowspan="1" colspan="1">
深圳:<br>
上海:<br>
</td>
</tr>
</tr>
</tr>
</tbody>
</table>
运行结果:
IE6下结果
IE8下结果
chrome下结果
Firefox下结果
可以看到,宽度的设置在Firefox和chrome下是正常的,但是在表格结构比较复杂的情形下,chrome的宽度也有可能显示失效,在IE下宽度是一定会失效的。但是有一个元素的宽度在所有的浏览器中都是没有问题的,就是第一个td的宽度是正常的,为什么?
看看页面的DOM结构,如下图
当设置宽度时,只有第一行即第一个tr中的宽度的是生效的,其他的宽度设置都是在后面的tr中的td都有问题,那么,如果将所有的td都放到第一个tr中设置,宽度会变得正常吗?
在原来的页面中加上thead部分,在这个tr中设置所有的td的宽度
<table cellspacing="0">
<thead>
<tr>
<th class="td0"></th>
<th class="td1"></th>
<th class="td2"></th>
<th class="td3"></th>
<th class="td4"></th>
<th class="td5"></th>
</tr>
</thead>
<tbody>
在IE下的运行结果如下:
在IE6和IE8下均显示正常了。
但是还是有问题存在:就是在chrome下这样做不正常,不知道为什么?