如果要兼容,那就一个个写上 <td width="50%">吧
html页面中,定义table表格中每个TD的宽度,可以使用内联样式定义。设置方法如下:
1、用table{ }标签定义了表格宽度;
2、用td{ }标签定义了单元格宽度。
此时整个表格的每个单元格宽度都会设置成功。
如下案例:
<!DOCTYPE html>
<html>
<head>
<title>表格边框宽度</title>
<style>
<!-- 定义表格宽度及样式-->
table{
text-align:center
width:500px
border-width:6px
border-style:double
color:blue
}
<!-- 定义单元格宽度及样式 -->
td{
width:158px
border-width:3px
border-style:dashed
}
</style>
</head>
<body>
<table border=1 cellspacing="3" cellpadding="0">
<tr>
<td>姓名</td>
<td class=tds>性别</td>
<td>年龄</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>31</td>
</tr>
<tr>
<td>李四 </td>
<td>男</td>
<td>18</td>
</tr>
</table>
</body>
</html>
如果是简单的表格,直上直下没有跨列或者跨行的:td { text-overflow:ellipsiswhite-space:nowrapoverflow:hidden} /* 设置不换行 省略号显示*/
然后只需要再给第一行的td分别加上class,例如:
<tr>
<td class="item1">单元格</td>
<td class="item2">单元格</td>
<td class="item3">单元格</td>
<td class="item4">单元格</td>
<td class="item5">单元格</td>
<td class="item6">单元格</td>
</tr>
然后,分别设置宽度
.item1 { width:20% }
....
.item6 { width:5% }
其他行同列的单元格会被撑开
比较复杂的有跨列或者跨行的表格,设置方法类似,但是就是要计算一下,比较麻烦。