扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
需要准备的材料分别有:电脑、浏览器、html编辑器。
目前创新互联建站已为成百上千家的企业提供了网站建设、域名、网站空间、网站托管维护、企业网站设计、象山网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。
1、首先,打开html编辑器,新建html文件,例如:index.html。
2、在index.html中的table标签中的第一个td标签,加入属性代码:width="65px"。
3、浏览器运行index.html页面,此时表格第一列的宽度被固定在65像素。
1、首先给table标签添加css : table-layout:fixed;这里是为了让整个table有一个自己宽度,而不是让table自己随着自己内容的大小而改变。
2、给table标签,定一个宽度(如:width:500px);
3、最后给td 定一个宽度(width)就可以实现.
原表格:
添加一下CSS:
现表格:
扩展资料:
在实际需求中,经常遇到要在table中的td中,让用户输入比较长的字符串,这时就要使td的宽度能较大。
在WEB前端中,对于 表格元素中的元素td 直接设置宽度是无法生效的。要想达到给td设置宽度的目地。
如果是全局设定表格一样的话,在CSS样式里添加如下:
td{
width:xx
px;
height:
xx
px;
}
如果是单个表格设定的话,在CSS样式里添加如下:
.tb1{
width:xx
px;
height:
xx
px;
}
.tb2{
width:xx
px;
height:
xx
px;
}
在body里引用如下:
tr
td
class="tb1"xxx/td
td
class="tb2"xxx/td
/tr
希望帮的上楼主~
如果是简单的表格,直上直下没有跨列或者跨行的:
td { text-overflow:ellipsis; white-space:nowrap; overflow: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% }
其他行同列的单元格会被撑开
比较复杂的有跨列或者跨行的表格,设置方法类似,但是就是要计算一下,比较麻烦。
CSS中宽度和高度分别可以通过width和height实现,那么对于单元格的宽度和高度,则可以通过如下样式来设置
td{ width:100px; height:50px;} /*设置单元格宽度100px,高度50px*/
示例如下:
给出HTML元素
table
trtd1/tdtd2/tdtd345/td/tr
trtd6789/tdtd10/tdtd11/td/tr
/table
设置单元格高度和宽度样式
table{border-collapse:collapse;}
td{
border: 1px solid green; /*边框*/
width:100px; /*单元格宽度*/
height:50px; /*单元格高度*/
text-align:center; /*单元格文字居中对齐*/
}
效果如下
方法一:有其它样式需求的,直接将css写入html标签中,宽度的话,只要设置第一行即可。如下
div
table
tr
td style="width:90;"12/td
td3/td
/tr
tr
td4/tdtd5/td
/tr
/table
/div
方法二:添加class
css写成 div.classA table td{width:90;}
这样,只有class属性为classA的div里面的table才会套用该样式
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流