css样式问题，table中的td值撑开了，样式变了

最新推荐文章于 2023-09-21 11:51:59 发布
最新推荐文章于 2023-09-21 11:51:59 发布
阅读量770 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 样式 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/u014227715/article/details/51470807
本文介绍如何通过CSS设置table的布局为固定，并对单元格内的文本进行溢出隐藏及省略号显示，实现优雅的表格展示效果。

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

       1、往table样式中添加table-layout:fixed;

       2、往td样式添加overflow:hidden;text-overflow:ellipsis;word-break:keep-all;white-space:nowrap;



ElementUI中的el-table解决宽度问题 - 根据内容自动撑开
觉醒法师的专栏
07-03 1万+
在使用element-ui中，会发现表格组件el-table在未指定宽度情况下，会自动计算并给表格宽度赋值。但实际开发中，有时需要根据内容实际长度自动撑开显示，由内容的多少而决定表格的宽度，而不是默认宽度为100%。在默认情况下表格宽度为100%显示，并且列项未指定宽度情况下，剩余部分会平均分配宽度，本案例实际需求是由内容自动撑开显示。componentUpdated
css实现不再让内容把td撑开的常用解决方法
09-25
内容把td撑开的情况想必大家都有遇到过吧，解决方法有很多，下面本文为大家介绍下一种常见的解决方法，感兴趣的朋友可以参考下哈，希望对大家有所帮助
写样式时，当td是空的时候就连在一起了，没有空的空格
___ 、努ㄌ
06-09 636
.tab_xx //tabley引用{ width: 516px; background: #BEDAE6; margin: 10px auto;}.tab_xx .tdLeft //左边标题{ width:100px; background: #F4F7FE; color: Black; text-ali
table 撑破div
ribavnu的专栏
07-14 2295
场景描述： div， table 经常会现让内容给撑开的情况， 大部分原因就是里面有一长串连续的字母数字， 因为没有空格和换行， 浏览器不知怎么将其断开， 所以让它的宽度无限延伸了。 我们可以针对表格的属性来限制大小防止被撑开，比如在?? table?{ table-layout::fixed; word-wrap:break-word; } 四、用css
解决td元素中文字一行撑开的问题
tianbinve3363的博客
01-25 792
存在的问题:table文字换行 解决后: 将th td元素加上属性 noWrap="noWrap" 即可解决当前文字分行问题
避免表格table被撑开变形的CSS
jiangfeng08的专栏
09-05 521
 如何避免表格因为图片尺寸或者过长的英文字符而变形撑开，在CSS加入以下代码就可以防止，同时英文单词也会按单词断行，不是按字母这个。我想说的是这个在CSS2.0是不支持的，但是能解决一些实际问题。页面设计不是为了标准检验而设计，还是以用户使用为主，在目前有些WEB标准无法解决的一些问题上，我会采用一些非标准的方法处理，只要主流BROWSER如IE,Firefox,Netscape,Opera等
javascript 使td内容不换行不撑开
12-13
在网页设计中，有时我们需要确保表格（`<table>`）中的单元格（`<td>`）内容不换行且不撑开单元格的宽度。这通常发生在显示长字符串或者需要控制表格布局的情况下。标题和描述中提到的问题是关于如何利用CSS来实现这...
table 中，如何使得单元格的内容不换行，单元格不被撑开，显示不下的时候在结尾处显示“...”
06-01
在网页设计中，经常需要处理表格（table）的布局问题，特别是当单元格（cell）内的文本内容过长时，如何保持单元格的固定宽度，不让内容换行，并在显示不下的情况下添加省略号（"..."）表示内容被截断。这涉及到CSS...
CSS代码实现避免table表格被撑开变形
zgqtxwd的专栏
04-30 780
<!--google_ad_client = "pub-2947489232296736";/* 728x15, 创建于 08-4-23MSDN */google_ad_slot = "3624277373";google_ad_width = 728;google_ad_height = 15;//--><script type="text/javascript"
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还是不被内容撑大的，宽度可以是百分比、也可...
table td 内容太长自动隐藏
j14741209959的博客
07-12 912
首先为table添加如下样式： style="table-layout:fixed; 其次为td添加如下样式： " style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden;" 详细如下所示：                 标题         内容         创建时间  
html 单元格被撑开_CSS教程:表格不被撑开的解决办法—css教程
weixin_30479433的博客
01-17 945
今天在做一个用户留言列表的时候，用到了表格。用户名为英文字符时，就会把固定宽度的单元格撑开。之前也有遇到过。解决办法：先用noWrap令文字不换行，再用style=table-layout:fixed;;word-break:break-all;;border-collapse:collapse强制表格不撑开，即达到效果。CSS教程:表格不被撑开的解决办法—css教程，需要注意的是：用了nowra...
table中的td内部的元素不能与td等高的问题
qiansitong的博客
09-21 1100
td标签内部的元素使用table布局，但是需要注意的是td必须设置高度，高度为任意值都可以，虽然设置了高度，但是td依然会被内部内容的高度撑开。
表格(table)不被撑开的解决办法
HELLO WORLD
09-28 7494
今天在做一个用户留言列表的时候，用到了表格。用户名为英文字符时，就会把固定宽度的单元格撑开。之前也有遇到过。 解决办法：先用nowrap强行令文字不换行，再用style="table-layout: fixed; word-break: break-all; border-collapse: collapse"强制表格不撑开，即达到效果。 需要注意的是： 用了nowrap的单元格设置的宽度要用百...
table自适应宽度
weixin_34248849的博客
06-28 3592
WEB应用的页面，表格的表现形式是常常遇到的，在列数有限的前提下，如何将各列中的内容自适应到不同分辨率的屏幕，这应该是一个比较容易遇到的问题，下面就来谈一谈我对这类问题的解决与看法。 将所有列设置为固定宽度，显然是不能满足此类要求的，但是若把全部的列都设置为百分比，恐怕在某些尺寸，或分辨率下，会变得很难看。在Bigtree看来，比较习惯于用如下的方式来处理——在表格列数不是很多的前提下——...
HTML表格中行列宽高等问题的探究解疑
我本可以
06-05 2112
表格宽高老是对不齐？动态设置的td的宽度不生效？单元格内容太多，省略号后鼠标悬浮显示。
table 中，如何使得单元格的内容不换行，单元格不被撑开，显示不下的时候在结尾处显示“...”...
rainbow702的博客
06-15 1571
之前的项目做过这种需求，但是由于不是自己亲手实现，所以以为只要使用 text-overflow 就可以实现这个需求了。但实事证明并没有那么简单。下面就把这个需求的实现要点理一下。 先说一下几个要点： table 的 “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...
div通过高度和overflow-y样式设置显示滑块;但是外层的td和table会被撑开高度
最新发布
10-29
当您尝试在一个`<div>`上应用高度(`height`)和`overflow-y`样式来创建滑块效果，如果这个`<div>`包含在一个`<td>`和`<table>`结构中，滑块的内容可能会导致外层`<td>`和`<table>`的高度随着内容增加而自动扩展。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值