table中td标签中内容过长时，设置td长度固定的方法

最新推荐文章于 2024-08-28 15:04:28 发布
最新推荐文章于 2024-08-28 15:04:28 发布
阅读量1.9w 收藏 14
点赞数 2
分类专栏： css h5 文章标签： html table
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_37861326/article/details/80803787
版权
css 同时被 2 个专栏收录
10 篇文章 1 订阅
订阅专栏
h5
5 篇文章 0 订阅
订阅专栏

在使用table标签时，我们设置了td的宽度且设置了单行溢出加省略号的样式，但是发现，td还是随内容的多少会撑开，如下图：


这样就不符合我们预期想要的效果，我们只需要在table标签上加属性： width="100%"  style="table-layout:fixed"


cellpadding，cellspacing这两个属性用于清除td标签之间的间隙。此外td设置样式：

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

以上就能达到预期效果：



_cris
关注
专栏目录
td长度固定，内容过长，超过部分用省略号代替
iBenxiaohai123的博客
07-28 1377
很多情况下，在网页设计时每个模块的宽度和高度都要固定，然后只需往模块里更新内容即可，但是如果内容过多，就有可能把模块撑大，从而使版面错乱。准对这个情况，网页设计时就要考虑到，每个模块的div或table的高宽一定不能因内容过多而变化，这需要在设计上使用一点技巧来实现。本文便介绍一个常用的也是非常简单的方法，这个方法是通过css代码来实现的。 实现代码如下 1、隐藏超出td宽度的图片区域（或
table中td内容换行问题
09-25
接着，设置表格的CSS属性`table-layout: fixed`，这样可以使得表格的列宽固定，不会因为内容的长度而变化。最后，为`<td>`设置`word-wrap: break-word`，允许单词在必要时断开以适应单元格的宽度。例如： ```css ...
多个div中table的tdwidth设置一样也不法对齐
09-28
最近发现多个div中table的td就算调成一样的width也无法对齐，后来发现了解决方法，提到table-layout: fixed，经设置效果相当不错，大家可以参考下
vue中的table列表内容超过长度
最新发布
java程序员的蜕变之路
08-28 201
添加：min-width="200px;
【前端】td中内容过长，设置固定长度，其余部分用省略号显示
浪荡子爱自由的博客
07-13 2373
问题： 表格中显示的内容过长，导致表格变形。如果表格中有比较长的链接地址，即使设置了列宽，设置宽度会无效。 解决方法： table设置样式： table-layout: fixed; // table的内部布局固定大小 td设置样式： <style> td { white-space:nowrap; // 规定段落中的文本不进行换行 overflow:hidden; // 关闭滚动条 text-ov
table 表格 td 长度固定、内容过长、超过部分设置
热门推荐
Anonymous
04-08 3万+
首先设置 table：<table width='100%' border='0' cellspacing='0' cellpadding='0' class='mytable' style='table-layout: fixed'>; td 方式一：（自动换行）<td colspan='3' style='word-wrap: break-word'>mail</td> td 方式二：（省略号代
表格 td 长度的问题
qq_25186543的博客
11-16 530
table 中的 td 给了长度不管用 给  table 加个 table{  table-layout:fixed ;} 给 th 加个 th{  white-space: nowrap;}   文字不换行    .newTable{table-layout:fixed ;} .newTable thead{background-color: #eef1f6;col
将td中文字过长的部分变成省略号显示的小技巧
09-25
要实现TD文字过长部分显示省略号的效果，我们首先需要设置表格的样式为`table-layout: fixed;`，这样表格的布局就是固定宽度的，不会因为内容的多少而改变每一列的宽度。然后，为TD元素设置一个固定的宽度，这是必须...
bootstrap表格内容过长时用省略号表示的解决方法
12-29
首先 ，bootstrap中当td内容超过我给的固定宽度时，省略号代替的代码如下： <table class=table> 商品名称 详细介绍 购买数量 <tbody i
css控制td内容长度
01-05
table中的内容经常超过了我们固定的td长度，这个css控制td的内容，如果超过了td长度则自动隐藏超过长度的字符，显示... 鼠标移过时，显示完整的td信息。
css实现不再让内容把td撑开的常用解决方法
12-13
在示例代码中，可以看到`<td>`标签内的内容非常长，但实际显示时，只有“dd”和一串被截断的长字符串，后面跟着省略号，这正是上述CSS属性组合应用的结果。 通过这种方式，我们可以确保表格的布局不受单元格内容...
td长度固定，内容过长，用固定长度
weixin_30772261的博客
10-26 125
table { table-layout: fixed; } table 长度要明确 table tr td { text-overflow: ellipsis; /* for IE */ -moz-text-overflow: ellipsis; /* for Firefox,mozilla */ overflow: hid...
table 表格如何设置单元格固定长度
u013108007的博客
09-09 1678
标签添加以下属性: table-layout：fixed
html 如何不拉伸td,html - table 表格不被撑开，td某些列宽度固定某些列自适应
weixin_39722917的博客
06-05 1819
1，实现table细边框,设置如下css：table,table td,table th{border:1px solid #ff0000;border-collapse:collapse;}2，table表格宽度固定，同时td内容过长也不会被撑开，设置如下css：table{table-layout:fixed;word-break:break-all;}3，在上面css设置下，td的width...
table 内容溢出
weixin_30439031的博客
07-27 383
html table td过长解决办法 页面需要显示一个table，列数比较多，导致无法一屏无法显示，导致需要左右拖动屏幕，十分不方便~ 于是，需要将较长的列分行显示，在td 处用style="width:90px;"结果不起作用了，之前确实是可以的，想起最近刚升级了chrome浏览器。 在网上搜索答案时，大多时隐藏多余内容的方式，在快要放弃，暴利舍弃一些列时，答案出现了 参考：htt...
td内容过长，table被撑开问题解决
Wisdom—Yoga—TaciturnKnight（WYT）
05-03 9603
由于table tr 内容过长，然后使用省略样式后， table长度被撑开， overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 解决方法： 在table上加样式： table-layout: fixed; word-break: break-all; 完美解决。...
TD不换行也不会被撑大撑开 并加上薄边框的方法
王德封-逐浪
06-05 1万+
TD不换行也不会被撑大的方法TD不换行也不会被撑大撑开 的方法：table{table-layout : fixed;width:100%;}td{word-break : keep-all; overflow: hidden;white-space:nowrap;text-overflow: ellipsis;}注意：table的宽度一定要设置，否则TD还是不被内容撑大的，宽度可以是百分比、也可...
js如何让table中的td内容过长显示为固定长度，多余部分用省略号代替
05-25
可以使用CSS中的`text-overflow`属性实现。 首先，设置td元素的宽度，超出部分自动隐藏，并且不能换行： ```css td { width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* 这里是关键，用省略号代替超出部分 */ } ``` 这样，如果td内容过长，超出部分就会用省略号代替。 注意，`text-overflow`属性只在以下情况生效： 1. 元素必须有固定的宽度（或max-width）。 2. 元素必须有“text-overflow: ellipsis”属性。 3. 元素必须有“white-space: nowrap”属性。 4. 元素必须有“overflow: hidden”属性。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值