table设置列宽度

遇到一个表格不能设置宽度（table有宽度，有一两列需要设固定大小的宽度并希望看到展现出来的宽度值与设定的一样，其他的列则可以根据剩余宽度自动填充，但是显示出来的宽度比实际设置的值多了几个像素）这个问题，百度了一下查到一些资料：

首先贴资料，相信大家看了基本就了解了：

tableLayout 属性用来显示表格单元格、行、列的算法规则。

固定表格布局：

固定表格布局与自动表格布局相比，允许浏览器更快地对表格进行布局。

在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。

通过使用固定表格布局，用户代理在接收到第一行后就可以显示表格。

自动表格布局：

在自动表格布局中，列的宽度是由列单元格中没有折行的最宽的内容设定的。

此算法有时会较慢，这是由于它需要在确定最终的布局之前访问表格中所有的内容。（以上tableLayout的内容摘自http://www.w3school.com.cn/cssref/pr_tab_table-layout.asp）

因此，在设定宽度的时候需要给table添加table-layout:fixed;。

但是在给td设定了宽度以后还是不能正常显示，此时就需要一个其他的属性 col或colgroup，给col或者colgroup设置一个宽度即可解决问题。(一个有趣的点是当设定的宽度不是4的倍数的时候，列的宽度总会显示小数，即差那么一点才满设定的宽度，作为一个小菜鸡暂时没发现为啥，(lll￢ω￢))。

下面贴个代码，仅供参考：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
table,tr,td{
border:1px solid;
border-collapse:collapse;
}
table{
width:1000px;
table-layout:fixed;
}
tr,td{
height:30px;
}
table>tbody>th>td{
width: 40px;
}
/*设定td的宽度,无效*/
/*#col1{
width: 40px;
}
#col2{
width: 80px;
}
#col4{
width: 50px;
}
#col7{
width: 120px;
}*/
</style>
</head>
<body>
<table>
<!--所有的宽度设定时，已设定宽度不能被4整除时会出现不能设定宽度，与列数多少无关-->
<!--全部用colgroup-->
<!--<colgroup align="center" width="100">
</colgroup>
<colgroup  />
<colgroup  />
<colgroup  />
<colgroup />
<colgroup />
<colgroup style="width:90px;"/>
<colgroup />-->
<!--全部用col-->
<!--<col width="90" />
<col  />
<col width="90" />-->
<!--<col  />
<col width="80"/>
<col  />
<col  />
<col  />-->
<!--colspan 和 col融合-->
<colgroup span="3" width="90">
<!--组合用时同样受4的倍数限定-->
<col width="90"/>
<col width="90"/>
<col width="120"/>
</colgroup>
<colgroup span="1"></colgroup>
<colgroup width="80"></colgroup> <!--span缺省值为1-->
<colgroup width="90"></colgroup>
<colgroup span="2"></colgroup>
<tr>
<td id="col1">diyi</td>
<td id="col1">diyi</td>
<td id="col2">第二列</td>
<td id="col3">第三列</td>
<td id="col4">第四列</td>
<td id="col5">第五列</td>
<td id="col6">第六列</td>
<td id="col7">第七列</td>
</tr>
<tr>
<td>adfa</td>
<td>飒飒东风</td>
<td>谔谔</td>
<td>打发</td>
<td>打法微软</td>
<td>啊多发点</td>
<td>啊啊啊啊啊啊</td>
<td>啊啊啊啊啊啊</td>
</tr>
<tr>
<td>fasdfa</td>
<td>阿斯蒂芬</td>
<td>啊打发</td>
<td>阿迪斯发</td>
<td>爱的色放我</td>
<td>的法沙发和</td>
<td>啊啊啊啊啊啊</td>
<td>啊打发</td>
</tr>
</table>
</body>
</html>

table设置列宽度相关推荐

拖动改变Table的列宽度
收藏自:http://www.cnblogs.com/xieex/archive/2007/12/15/996025.html <html> <head> <meta h ...
解决jQgrid 设置列宽度自动调整时, 出现滚动条问题.
解决jQgrid 设置列宽度自动调整时, 出现滚动条问题. 参考文章: (1)解决jQgrid 设置列宽度自动调整时, 出现滚动条问题. (2)https://www.cnblogs.com/piao ...
poi生成excel时换行符（\n）只有鼠标双击才会生效，设置列宽度不生效
1.poi生成excel时换行符(\n)只有鼠标双击才会生效解决:样式中打开自动换行style.setWrapText(true); 2.设置列宽度不生效sheet.setDefaultColumn ...
＜table/＞设置列宽度无效的问题
一.场景重现 <html> <head><title>测试</title><style type="text/css"> ...
php 导出csv设置列宽度,php数据库导出excel表格数据-php从数据库导出csv格式的Excel表格是，字段本身就......
PHP如何将查询出来的数据导出成excel表格(最好做... $objPHPExcel->getActiveSheet()->getDefaultColumnDimension(A)-&g ...
python设置列宽度_如何在xlsxwri中自动设置列的宽度
我只知道用COM来做这个的方法.在import contextlib, os, win32com.client @contextlib.contextmanager def load_xl_file( ...
datagrid表头与数据列宽度不对齐_easyui datagrid标题列宽度自适应
最近项目中使用easyui做前端界面,相信大部分使用过easyui datagrid的朋友有这么一个疑问:如果在columns中不设置width属性能不能写个方法让datagrid的头部标题和数据主体 ...
table列最小宽度 vue_vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)...
mounted() { // 在mounted中监听表格scroll事件 this.$refs.scrolltable.addeventlistener( 'scroll',(event) => ...
html表格td宽度设置,table以及td宽度设置细节
table中table-layout设置 auto 默认值在此设置下如果没有指定table的宽度,则table会根据每列td的宽度自动被撑开,如果没有显示指定td的宽度,则td宽度根据内容而定只到t ...

table设置列宽度

table设置列宽度相关推荐

最新文章

热门文章