前端笔记,table标签中td宽度不受控制的坑
问题发现
在table标签中,td的宽度设置好后,是没有用的,因为table是一个整体,他的td宽度是由其中一个最长td宽度决定的,
原因是浏览器默认情况下,如果有一个单词很长,导致一行剩下的空间放不下,则浏览器会把这个单词挪到下一行去。但是如果新行还是放不下,则会溢出,就会变成下面的样子,
如图所示
问题解决
这时候只要在table标签上加
word-wrap: break-word;
word-break: break-all;
之后再设置百分比宽度就可以生效了
如图所示
问题分析
word-wrap: break-word; 会先另起一行,新的行放不到再把单词断了
word-break: break-all; 他不会去新起一行,而是直接在后面跟着,如果放不下,则会强制把单词折断
举个简单的例子
I am a shy boyyyyyyyyyyyyyyyyyyyyyyyyyyyyy
如果用word-wrap: break-word;则会变成
I am a shy
boyyyyyyyyyyyyyyyyyyyyyyyyyyyyy
如果用word-break: break-all;则会变成
I am a shy boyyyy
yyyyyyyyyyyyyyyyyyyyyyyyy
参考文章:
https://blog.csdn.net/u013216667/article/details/80921364
https://www.cnblogs.com/xiayu25/p/6081592.html
感谢原作者的分享,让技术人能够更快的解决问题
前端笔记,table标签中td宽度不受控制的坑相关推荐
- Web前端开发 table标签相关用法和属性
table标签 html中的<table>标签,通常用于对页面布局的规划. 一.<table>标签简介 table标签用于在网页中建立表格布局,其子标签有<tr>& ...
- PHP自学3——在html的table标签中显示用户提交表单
为了更好地显示用户提交表单,本节将在上一节的基础上将读取的用户表单显示在html的<table>标签中,这一节将用到和数组有关的知识. 本节代码将从外部文件(.txt文件)中读取信息于指定 ...
- ie8下table th和td宽度width设置不生效解决办法
ie8下table th和td宽度有时候设置无效,不按设定的宽度显示,怎么办? 这种情况一般分为两种: 第一种,某td的内容很多,需要换行,将td撑开了.这种情况还比较好处理,只要给td设置css属性 ...
- table标签中tr和td的英文单词
table标签 tr标签 td标签 th标签 首标签<table>和尾标签</table>分别表示一个表格的开始与结束.这是不难理解的. tr是"table row( ...
- 前端之body标签中相关标签(二)
一 列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: a.ul:unordered list,"无序列表" ...
- PHP自学4——通过函数将数组数据输出到html的Table标签中(使用函数的例子)
这一节其实说实话并没有什么干货,不过为了防止PO主的懒癌的复发,还是坚持放一点东西,即使是内容和长度都令人发指.这一节通过一个函数来实现将数组中的内容输出html的Table标签当中显示. 函数文件- ...
- 前端之body标签中相关标签(一)
一 字体标签 字体标签包含:h1~h6.<font>.<u>.<b>.<strong><em>.<sup>.<sub> ...
- 20180227:关于HTML中table标签中合并单元格时遇到的问题
今天在初次学习HTML的时候,便在table标签的使用上遇到了个问题,就是在合并单元格时发现单元格的合并显示之后并没有按自己所想的那样显示,具体问题也描述不出来,通过代码和实例来记录一下这个烦人的问题 ...
- php中td的属性设置,html table表格是什么?table标签中各种属性的使用方法
html table表格是什么? 首先让我们了解什么是表格,还有表格的作用 什么是table表格:由一些 被称之为 单元格的矩形框 按照从左到右从上到下的顺序排列到一起组成的 table表格的作用:以 ...
最新文章
- android ScrollView 控制行数
- android 语音通信,Android与PC间的语音通信
- Axure RP使用攻略--动态面板的用途(8)
- eclipse占用内存过大_Java性能调优学习(三)-jmap+mat分析内存溢出问题实战
- maven导入jar失败
- JS数据类型 构造函数 原型链
- 走进我的交易室08_有条理的交易者
- libreoffice转换文件为pdf文件乱码问题解决办法
- 使用原生JS封装Ajax
- mysql二进制增量备份
- spark结构化流保存mysql_[Spark]-结构化流之输出篇(待重修)
- AI中台——智能聊天机器人平台的架构与应用
- 家用冰箱里面用的抽屉模具图档分析
- java中sql查重跟去重_SQL查重去重
- 用Python计算现在距离春节还剩多长时间
- 单臂路由配置-ZTE中兴交换机
- 百度谷歌一起搜 - 百Google度 - Chrome插件
- Project 2016 中文版软件快捷键学习
- 空指针异常 NullPointException
- PHP自动排班系统 源码+说明