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

html-css017

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设置宽度的目地。

1、设置表格的边框。在CSS中,可以通过border来设置表格或单元格的边框及其边框颜色,例如,下面设置表格为1px的蓝色边框。

2、在table表格里,默认是显示两个边框线的,如果要设置成一条边框,在CSS中需要使用border-collapse设置为collapse,合并为一条边框。

3、CSS设置表格的宽度和高度,使用width宽度和height高度来设置。

4、CSS设置表格的文本水平对齐方式。主要通过text-align来设置,有三个值:居左对齐left,居右对齐right,居中对齐center。

5、CSS设置表格的内边距。主要通过padding来设置,padding值越大,内边距越大,如图设置间距为15像素。

6、如图所示间距设置成功。

设置每个table的样式,比如class=tab1,class=tab2,然后在样式表设置

.tab1 td{这里为tab1的样式}

.tab2 td{这里为tab2的样式}

而不用一个个去设置td class="xx"了 毕竟比较麻烦。

如下代码:

<table >

<td class="style1" >内容</td >

</table >

<table >

<td class="style2" >内容</td >

</table >

在CSS中定义:

.style1 {

}

.style2 (

}

或者是给TD加上class,相同样式用的相同Class,不同样式用的不同Class