＜table/＞设置列宽度无效的问题

一、场景重现

<html>
<head><title>测试</title><style type="text/css">.table {table-layout: fixed;}</style>
</head>
<body>
<div style="width: 100%"><table class="table" style="width: 100%"><thead><tr><th colspan="7" style="background-color: #2f96b4">地址情况</th></tr><tr><th style="width: 80px;">国家</th><th style="width: 80px;">省份</th><th style="width: 80px;">城市</th><th style="width: 80px;">区</th><th style="width: 80px;">街道</th><th style="width: 500px;">居委会</th><th style="width: 80px;">门牌号</th></tr></thead><tbody><tr style="text-align:center"><td>中国</td><td>广东</td><td>广州</td><td>天河</td><td>五山</td><td><pre style="word-break: break-all">天河中学高中部隔壁的小区</pre></td><td><pre >aa</pre></td></tr></tbody></table>
</div>
</body>
</html>

运行结果：

期待结果：

二、分析原因

如果对<table/>设置table-layer:fixed样式后，列宽会平均化，对列<th/>的宽度设置会失效。

解决方法：
在tbody前面加

<colgroup><col style="width: 100px;"/><col style="width: 100px;"/><col style="width: 100px;"/><col style="width: 150px;"/><col style="width: 100px;"/><col style="width: 500px;"/><col style=""/>
</colgroup>

＜table/＞设置列宽度无效的问题相关推荐

table设置列宽度
遇到一个表格不能设置宽度(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 ...
bootstrap table 冻结列操作无效
此问题产生的原因感觉是因为冻结列是在上边又盖了一层表格导致无效. 所以点击事件的解决方法的原理是转移点击事件在bootstrap-table-fixed-columns.js 中修改代码本人 ...
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的头部标题和数据主体 ...
[html] table中给td设置宽度无效怎么解决？
[html] table中给td设置宽度无效怎么解决? 默认是列宽度由单元格内容设定 table 添加css tableLayout :fixed; 个人简介我是歌谣,欢迎和大家一起交流前后端知识. ...

＜table/＞设置列宽度无效的问题

一、场景重现

二、分析原因

＜table/＞设置列宽度无效的问题相关推荐

最新文章

热门文章