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

最新推荐文章于 2023-10-16 16:46:23 发布
最新推荐文章于 2023-10-16 16:46:23 发布
阅读量1.9w 收藏 14
点赞数 2
CC 4.0 BY-SA版权
分类专栏： css h5 文章标签： html table
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_37861326/article/details/80803787
本文介绍如何通过设置table标签属性及CSS样式实现固定宽度表格，并使单元格内容在溢出时显示为省略号，达到美观且节省空间的效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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


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


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

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

以上就能达到预期效果：



td长度固定，内容过长，超过部分用省略号代替
iBenxiaohai123的博客
07-28 1480
很多情况下，在网页设计时每个模块的宽度和高度都要固定，然后只需往模块里更新内容即可，但是如果内容过多，就有可能把模块撑大，从而使版面错乱。准对这个情况，网页设计时就要考虑到，每个模块的div或table的高宽一定不能因内容过多而变化，这需要在设计上使用一点技巧来实现。本文便介绍一个常用的也是非常简单的方法，这个方法是通过css代码来实现的。 实现代码如下 1、隐藏超出td宽度的图片区域（或
css控制td内容长度
01-05
table中的内容经常超过了我们固定的td长度，这个css控制td的内容，如果超过了td长度则自动隐藏超过长度的字符，显示... 鼠标移过时，显示完整的td信息。
【前端】td中内容过长，设置固定长度，其余部分用省略号显示
浪荡子爱自由的博客
07-13 2508
问题： 表格中显示的内容过长，导致表格变形。如果表格中有比较长的链接地址，即使设置了列宽，设置宽度会无效。 解决方法： 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 方式二：（省略号代
多个div中table的tdwidth设置一样也不法对齐
09-28
总结来说，当遇到`table`中的`td`无法对齐的问题时，可以尝试将`table`的`table-layout`属性设置为`fixed`。这种方法能够确保表格单元格的宽度一致，提高跨浏览器的兼容性和一致性。不过，需要注意的是，`table-...
table中td内容换行问题
09-25
接着，设置表格的CSS属性`table-layout: fixed`，这样可以使得表格的列宽固定，不会因为内容的长度而变化。最后，为`<td>`设置`word-wrap: break-word`，允许单词在必要时断开以适应单元格的宽度。例如： ```css ...
将td中文字过长的部分变成省略号显示的小技巧
09-25
要实现TD文字过长部分显示省略号的效果，我们首先需要设置表格的样式为`table-layout: fixed;`，这样表格的布局就是固定宽度的，不会因为内容的多少而改变每一列的宽度。然后，为TD元素设置一个固定的宽度，这是必须...
bootstrap表格内容过长时用省略号表示的解决方法
12-29
首先 ，bootstrap中当td内容超过我给的固定宽度时，省略号代替的代码如下： <table class=table> 商品名称 详细介绍 购买数量 <tbody i
css实现不再让内容把td撑开的常用解决方法
12-13
在示例代码中，可以看到`<td>`标签内的内容非常长，但实际显示时，只有“dd”和一串被截断的长字符串，后面跟着省略号，这正是上述CSS属性组合应用的结果。 通过这种方式，我们可以确保表格的布局不受单元格内容...
表格 td 长度的问题
qq_25186543的博客
11-16 564
table 中的 td 给了长度不管用 给  table 加个 table{  table-layout:fixed ;} 给 th 加个 th{  white-space: nowrap;}   文字不换行    .newTable{table-layout:fixed ;} .newTable thead{background-color: #eef1f6;col
解决table表格td中文字过长自动换行问题
最新发布
苏木瑾
10-16 4695
2、在td中加word-wrap:break-word;1、在table中加table-layout:fixed;对我遇到的问题来说，没用，可能是因为框架样式冲突的原因。在显示长内容的td里面将内容放在div标签里面。网上有很多说可以解决的，大致有以下几种。
td长度固定，内容过长，用固定长度
weixin_30772261的博客
10-26 146
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 1746
标签添加以下属性: table-layout：fixed
html 如何不拉伸td,html - table 表格不被撑开，td某些列宽度固定某些列自适应
weixin_39722917的博客
06-05 1945
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 402
html table td过长解决办法 页面需要显示一个table，列数比较多，导致无法一屏无法显示，导致需要左右拖动屏幕，十分不方便~ 于是，需要将较长的列分行显示，在td 处用style="width:90px;"结果不起作用了，之前确实是可以的，想起最近刚升级了chrome浏览器。 在网上搜索答案时，大多时隐藏多余内容的方式，在快要放弃，暴利舍弃一些列时，答案出现了 参考：htt...
TD不换行 nowrap属性
热门推荐
有梦就能实现
11-23 9万+
表格table的td单元格中，文字长了往往会撑开单元格，但是如果table都不够宽了，就换行了好像（不要较真其他情况，我只说会换行的情况）。换行后的表格显得乱糟糟，不太好看，我不喜欢这样的换行。当然可以通过对每列td都设置宽度，那样太麻烦了，并且有时没法预计td中的文字会有多长，没法给固定宽度。 为了让表格里文字不换行（预计也不会太长的字符串），可以给表格里td添加一个nowrap属性，如
td内容过长，table被撑开问题解决
Wisdom—Yoga—TaciturnKnight（WYT）
05-03 9819
由于table tr 内容过长，然后使用省略样式后， table长度被撑开， overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 解决方法： 在table上加样式： table-layout: fixed; word-break: break-all; 完美解决。...
js如何让table中的td内容过长显示为固定长度，多余部分用省略号代替
05-25
这样，如果td内容过长，超出部分就会用省略号代替。 注意，`text-overflow`属性只在以下情况生效： 1. 元素必须有固定的宽度（或max-width）。 2. 元素必须有“text-overflow: ellipsis”属性。 3. 元素必须有...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值