如何使用css 强制控制 TD 的宽度?

html-css018

如何使用css 强制控制 TD 的宽度?,第1张

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

如果要兼容,那就一个个写上 <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% }

其他行同列的单元格会被撑开

比较复杂的有跨列或者跨行的表格,设置方法类似,但是就是要计算一下,比较麻烦。