html中怎么在CSS中设置TABLE的每一个TD的不同宽度

html-css013

html中怎么在CSS中设置TABLE的每一个TD的不同宽度,第1张

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的宽度,如果不设置的话,会根据内容的长短来自动适应的。

如果有多项内容,其中的某几项,比如日期 价格 类型等,词量短,可固定宽度的,可以给固定的宽度,然后标题类的就不用写,这样就是没有写宽度的td 会根据内容自动适应。

总之就是能定宽度的就固定一下宽度,剩下不能固定宽度的让他们根据内容自动适应,这是最常用的方式

如果不要支持低版本IE的话可以用 :nth-child 选择器,给指定位子的 td 加上 width

如果要兼容,那就一个个写上 <td width="50%">吧