<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>


 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/324271.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

公众号一年能有多少收入?

大家好&#xff0c;我是雄雄&#xff0c;欢迎关注微信公众号【雄雄的小课堂】。前言由于坚持日更公众号也有一年左右了&#xff0c;好多人问我你这公众号一年到底能收入多少啊&#xff1f;值得你花那么多的时间去摆弄吗&#xff1f;今天我就来说说我这公众号&#xff0c;一年到…

SpringBootAdmin客户端接入

只有网关微服务有方框中的内容&#xff0c;其他微服务没有

ssl初一组周六模拟赛【2018.5.12】(期中)

前言 这周竟然没有奶死自己&#xff0c;成为模拟赛第一个AK的&#xff08;然而第一题数据错了所以这次放加上第一题的分&#xff09; 先说一下成绩&#xff1a; 姓名成绩wyc400xjq290xxy255lrz225hzb205zyc190hjq180lw140 期中总结 正题 题目1&#xff1a;ssl2413 排名【…

Java自动化邮件中发送图表(一)

一、邮件需求 邮件中需要展示柱状图、折线图和饼图等图表数据。如图&#xff1a; 二、解决方案 将图表转成图片&#xff0c;采用html邮件文本&#xff0c;使用base64编码图片发送邮件。 将图表导出成图片有三种方式&#xff1a; &#xff08;1&#xff09;JFreeChart 优点…

springboot+mybatis-plus实例demo

大家好&#xff0c;我是雄雄&#xff0c;欢迎关注微信公众号【雄雄的小课堂】。前言故事还得从一次微信通话说起……一个夜深人静的晚上&#xff0c;正在电脑前看书&#xff0c;突然&#xff0c;放在旁边的手机响了起来&#xff0c;原来是一个朋友打的微信电话。“你在干嘛呢&a…

分布式事务,EventBus 解决方案:CAP【中文文档】

前言 很多同学想对CAP的机制以及用法等想有一个详细的了解&#xff0c;所以花了将近两周时间写了这份中文的CAP文档&#xff0c;对 CAP 还不知道的同学可以先看一下 .NET Core 事件总线,分布式事务解决方案&#xff1a;CAP。 本文档为 CAP 文献&#xff08;Wiki&#xff09;&…

POJ1330-Nearest Common Ancestors【tarjan,LCA】

正题 题目链接&#xff1a; http://poj.org/problem?id1330 题目大意 就是给出一棵树&#xff0c;求LCA&#xff08;最近公共祖先&#xff09; 解题思路 用tarjan求LCA&#xff0c;这里给出tarjan算法 代码 #include<cstdio> #include<iostream> using nam…

Java自动化邮件中发送图表(二)之JFreeChart

一、JFreeChart库 JFreeChart是JAVA平台上的一个开放的图表绘制类库。 JFreeChart可生成饼图&#xff08;pie charts&#xff09;、柱状图&#xff08;bar charts&#xff09;、散点图&#xff08;scatter plots&#xff09;、时序图&#xff08;time series&#xff09;、甘…

springboot点击运行没反应,什么都不显示的解决方式

大家好&#xff0c;我是雄雄&#xff0c;欢迎关注微信公众号【雄雄的小课堂】。最近这段时间一直在看开源框架&#xff0c;自己慢慢的琢磨&#xff0c;终于将jeecgboot环境搭建起来&#xff0c;并且成功的跑起来了demo&#xff0c;在此过程中&#xff0c;很明显的能感觉到自己进…

C#和NewSQL更配 —— CockroachDB入门

一、CockroachDB是什么 CockroachDB&#xff08;https://www.cockroachlabs.com&#xff09;是Google备受瞩目的Spanner的开源模仿&#xff0c;承诺提供一种高存活性、强一致性&#xff0c;可横向扩展的SQL数据库。主要的设计目标是全球一致性和可靠性&#xff0c;从蟑螂&#…

springboot+layui从控制器请求至页面时js失效的解决方法

大家好&#xff0c;我是雄雄&#xff0c;欢迎关注公众号【雄雄的小课堂】。 昨天遇到了个很棘手的问题&#xff0c;其实也怪自己大意了&#xff0c;然后翻来覆去一个类一个类的去看&#xff0c;看完之后挨个技术点怀疑&#xff0c;然后分别从各个技术点入手解决&#xff0c;但…

JfreeChart(八)之甘特图

转载自 JfreeChart实现甘特图 一、甘特图简介 甘特图(Gantt chart)又称为横道图、条状图(Bar chart)。以提出者亨利L甘特先生的名字命名。 甘特图内在思想简单&#xff0c;即以图示的方式通过活动列表和时间刻度形象地表示出任何特定项目的活动顺序与持续时间。基本是一条…

springboot从控制器请求至页面时js失效的解决方法

大家好&#xff0c;我是雄雄&#xff0c;欢迎关注公众号【雄雄的小课堂】。昨天遇到了个很棘手的问题&#xff0c;其实也怪自己大意了&#xff0c;然后翻来覆去一个类一个类的去看&#xff0c;看完之后挨个技术点怀疑&#xff0c;然后分别从各个技术点入手解决&#xff0c;但都…

ASP.NET Core 源码学习之 Options[2]:IOptions

在 上一篇 中&#xff0c;介绍了一下Options的注册&#xff0c;而使用时只需要注入 IOption 即可&#xff1a; public ValuesController(IOptions<MyOptions> options){ var opt options.Value; } IOptions IOptions 定义非常简单&#xff0c;只有一个Value属性&a…

Java自动化邮件中发送图表(三)之Highchart

一、Highchart &#xff08;1&#xff09;Highchart.js Highcharts 是一个用纯JavaScript编写的一个图表库。能够很简单便捷的在web网站或是web应用程序添加有交互性的图表。 &#xff08;2&#xff09;highcharts-serverside-export Highcharts Serverside Export框架&…

【2018.5.19】模拟赛之一-ssl2432 面积最大【数学】

正题 大意 解题思路 沟谷定理可以用半径求出高度&#xff0c;然后暴力枚举就好了 公式&#xff1a; ahr2−(a/2)2−−−−−−−−−√∗2ahr2−(a/2)2∗2bhr2−(b/2)2−−−−−−−−−√∗2bhr2−(b/2)2∗2然后计算两个的面积去掉重复的 Sa∗ahb∗bh−a∗bSa∗ahb∗bh−a…