table中如何用CSS控制<tr>><td>的宽度和高度

html-css019

table中如何用CSS控制<tr>><td>的宽度和高度,第1张

1、首先给table标签添加css : table-layout:fixed这里是为了让整个table有一个自己宽度,而不是让table自己随着自己内容的大小而改变。

2、给table标签,定一个宽度(如:width:500px)

3、最后给td 定一个宽度(width)就可以实现.

原表格:

添加一下CSS:

现表格:

扩展资料:

在实际需求中,经常遇到要在table中的td中,让用户输入比较长的字符串,这时就要使td的宽度能较大。

在WEB前端中,对于 表格元素中的元素td 直接设置宽度是无法生效的。要想达到给td设置宽度的目地。

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

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

签即可。

<table width="745" height="745" border="0" cellpadding="0" cellspacing="0">

<tr>

<td colspan="3">

<img src="images/CAJ_01.jpg" width="745" height="136" alt=""></td>

</tr>

<tr>

<td><div style="width:137px">

<img src="images/CAJ_02.jpg" width="137" height="472" alt=""></div></td>

<td><div style="width:471px">你要打的文字</div></td>

<td><div style="width:137px">

<img src="images/CAJ_04.jpg" width="137" height="472" alt=""></div></td>

</tr>

<tr>

<td colspan="3">

<img src="images/CAJ_05.jpg" width="745" height="137" alt=""></td>

</tr>

</table>