前端学堂(好切网)-Web前端开发,网页切图教程分享平台
前端学堂(好切网),PS网页切图,专业WEB前端外包网站
您的位置:首页 > 前端学堂 > HTML/CSS

设置table中列的固定宽度,table-layout:fixed属性

2017-07-21 09:53:27分类:HTML/CSS阅读(190)

今天,遇到的问题是这样的。

在table中设置了<colgroup></ colgroup>,代码如下。
<table class="table01">
<colgroup>
     <col class="colL1">
     <col class="colL1">
     <col class="colL1">
     <col class="colL2">
     <col class="colR1">
</colgroup>
</table>
并且在css中设置了各个列的宽,代码如下。
.table01 .colL1 {
    width: 25px;
}  
.table01 .colL2 {
    width: 165px;
}
.table01 .colR1 {
    width: auto;
}
 
但是,在谷歌(Chrome)浏览器中前两列的宽总是比25px宽。在火狐(FF)中却没有出错。
 
解决方法:
如果想要一个table固定大小,里面的文字强制换行(尤其是在一长串英文文本,并且中间无空格分隔的情况下),以达到使过长的文字不撑破表格的目的,一般是使用样式:table-layout:fixed。
 
在table的class中设置了table-layout:fixed属性,轻松解决了问题。
代码如下:
.table01 {    
    width: 100%;
    table-layout: fixed;
}

解析:table-layout:fixed属性
(所有浏览器都支持 table-layout 属性。)
fixed : 固定布局的算法。在这算法中,水平布局是仅仅基于表格的宽度,表格边框的宽度,单元格间距,列的宽度,而和表格内容无关。 
 
table-layout:automatic属性(默认值)
相对应的是 自动表格布局
在自动表格布局中,列的宽度是由列单元格中没有折行的最宽的内容设定的。
 
原文链接:http://www.hqhtml.com/htmlcss/35.html,出自好切网(前端学堂),转载请注明出处。
标签:
相关阅读 ~
推荐文章

© 2016 好切网(hqhtml.com) 长春诺阳科技有限公司(网页前端切图) 版权所有 吉ICP备15007500号