今天,遇到的问题是这样的。
在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属性(默认值)
相对应的是 自动表格布局:
在自动表格布局中,列的宽度是由列单元格中没有折行的最宽的内容设定的。