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