让文字自动适应Table宽度

最新推荐文章于 2024-06-27 22:26:27 发布
最新推荐文章于 2024-06-27 22:26:27 发布
阅读量1.8k 收藏
点赞数
分类专栏： 网站建设 文章标签： table asp.net mozilla jsp asp css
<script type="text/javascript"> </script> <script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"></script>

用CSS实现，文字自动适应Table的宽度，并且超出的宽度的文字自动隐藏。IE下面还可以自动出现...的省略符号。
所用到的样式:

程序代码
.ctl{
table-layout:fixed
}
.ctl td{text-overflow:ellipsis;overflow:hidden;white-space: nowrap;padding:2px}

说明：
table-layout:fixed 固定布局的算法,则表格被呈递的默认宽度为 100% (For IE,Mozilla)
text-overflow:ellipsis 当对象内文本溢出时显示省略标记(...) (For IE)
overflow:hidden 不显示超过对象尺寸的内容 (For IE,Mozilla)
white-space: nowrap 强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象 (For IE,Mozilla)
==========
下面是一个具体的例子
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>

<style>
.ctl{
table-layout:fixed
}
.ctl td{text-overflow:ellipsis;overflow:hidden;white-space: nowrap;padding:2px}
</style>
</HEAD>

<BODY>
<table cellSpacing="0" cellpadding="1" width="100%" class="ctl" border=1>
<colgroup>
<col>
<col width="60">
</colgroup>
<tBody>
<tr>
<td>corange.cn Corange的杂乱记事
ASP,PHP,JSP,JS,ASP.NET,DIV,CSS等网站建设相关技术</td>
<td>(1/1)</td>
</tr>
<tr>
<td>corange.cn Corange的杂乱记事
ASP,PHP,JSP,JS,ASP.NET,DIV,CSS等网站建设相关技术corange.cn Corange的杂乱记事
ASP,PHP,JSP,JS,ASP.NET,DIV,CSS等网站建设相关技术</td>
<td>(1/1)</td>
</tr>
<tr>
<td>corange.cn Corange的杂乱记事
ASP,PHP,JSP,JS,ASP.NET,DIV,CSS等网站建设相关技术</td>
<td>(1/1)</td>
</tr>
<tr>
<td>corange.cn Corange的杂乱记事
ASP,PHP,JSP,JS,ASP.NET,DIV,CSS等网站建设相关技术</td>
<td>(1/1)</td>
</tr>
</tBody>
</table>
</BODY>
</HTML>

piperzero
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端vue uni-app仿今日头条、网易新闻 tabs 组件，根据文字多少自适应 tab 项宽度
chenchuang0128的博客
05-22 992
## 快速实现 tabs组件，根据文字多少自适应tab项宽度， 详情请访问uni-app插件市场地址：-- spaceLeft设置tabs间距 -->name: '新能源车电池'name: '食品饮料白酒'name: '先进制造业'name: '光伏产业'name: '银行金融'name: '医疗健康'name: '行业七'name: '行业八'
table宽度一样宽_table 宽100% td如何宽度随文字自适应？
weixin_30670123的博客
12-24 1544
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">table* {margin: 0;padding: 0;}header {height:40px;background: red;box-sizing: border-box;font...
Css让文字自适应Table宽度[转]
weixin_33929309的博客
06-02 135
Css让文字自适应Table宽度[转] .ctl{ table-layout:fixed } .ctl td{text-overflow:ellipsis;overflow:hidden;white-space: nowrap;padding:2px} 关键样式: table-layout:fixed 固定布局的算法,则表格被呈递的默认宽度为 100% (...
uview中的utabs组件item字数不一致导致滑块偏移
最新发布
qq_42874794的博客
06-27 293
给item单独设置宽度，使滑块计算准确。
table自适应
蒗若晨曦
04-19 680
自适应宽度： td { width: 1px; white-space: nowrap; /* 自适应宽度*/ word-break: keep-all; /* 避免长单词截断，保持全部 */ } 自适应高度 table { table-layout: fixed; width: 100%; } ---------------...
设置table中的宽度不随文字改变让其固定
09-28
1. 超过宽度和高度的文字自动隐藏： ```html ; height: 25px; overflow-x: hidden; overflow-y: hidden;"> 长文本内容... ``` 2. 设置了td的宽度，超过长度自动换行： ```html ; word-wrap: break-word;...
jsp页面Table自动换行
04-14
表格的换行可以通过调整`width`属性，或者使用CSS的`display`属性（如`table-cell`）来实现。 2. **CSS布局**：在JSP中，可以使用CSS来控制表格的样式，包括自动换行。例如，使用`word-wrap: break-word;`可以使...
CSS+Table图文混排中实现文本自适应图片宽度（超简单+跨所有浏览器）
09-06
这里我们将探讨如何解决在table元素中图片与文字混排时，文本能够自动适应图片宽度的问题，同时兼容所有主流浏览器。 首先，问题的背景是在一个table中，上一行显示图片，下一行显示与图片相关的描述文字。当图片...
通过css属性margin:auto让Div中的Table居中
09-25
但要记住，这种方法依赖于元素有固定的宽度，对于响应式设计，可能需要根据不同的屏幕尺寸调整宽度，以保持居中效果。同时，随着现代CSS布局技术的发展，如Flexbox和Grid，它们提供了更灵活的布局解决方案，可以考虑...
uni-app table表格
10-26
8. **响应式布局**：uni-app支持响应式布局，`table`组件在不同设备上可以自动调整适应屏幕大小。 在`no-bad-table`的实践中，可能包括以下几点： 1. **避免性能问题**：当数据量大时，一次性加载所有数据可能导致...
js实现自适应宽度的tab标签导航
06-10
js实现自适应宽度的tab标签导航。相关链接：tab标签图片切换特效。懒人之家推荐下载
标签宽度自适应，超距换行
Han_SM的博客
04-15 260
self.DataArr = @[@"标签一",@"标签二",@"标签三"]; - (void)createUI{ CGFloat tagBtnX = 0; CGFloat tagBtnY = 0; for (NSInteger i= 0; i<self.DataArr.count; i++) { CGSize tagTextSize = [self. sizeWithFont:[UIFont systemFontOfSize:16] max...
table 设置自动宽度后 td 的固定宽度 在 谷歌浏览器自动拉伸
aozhagou1147的博客
04-26 282
table 设置自动宽度后 td 的固定宽度 在 谷歌浏览器自动拉伸 解决方案 <table style="table-layout:fixed;"> 转载于:https://www.cnblogs.com/JQSY/p/5540089.html...
vue实现tabs页签切换+自适应
lu123ying的博客
12-29 1614
vue实现tabs页签切换+自适应
uview tabs标签根据文字长度占不同的宽
M40153c的博客
04-12 3474
正常情况下 如果list有4个，则会把宽度4等分，如何根据文字的长度设置不同的标签宽度呢 <u-tabs :list="list" :current="current" gutter="25" active-color="#659ddd" @change="change" :is-scroll="false" ellipsis="false" :style="...
关于u-table宽度问题
qq_44774622的博客
12-06 1089
修改u-tabel中的表格宽度
table 的宽度设置无效
weixin_30496431的博客
06-09 677
1.在table 标签添加样式 table-layout:fixed; 必须设置width的值:<table style="table-layout:fixed"><td style="width:50px;"></td></table> 2.在如果th的宽没有设置，那么在td里面添加一个节点，如果div，通过设置td里面节点的wid...
uniapp u-tabs的项目无法撑满整个盒子的问题，以及下划线异常
cv1002420186的博客
04-28 1943
uniapp
layui table表头宽度小自动换行
08-30
### 回答1： 要让layui table表头宽度小自动换行，可以通过设置CSS样式来实现。具体方法如下： 1. 找到表头所在的元素，一般是class为layui-table-box的div。 2. 给这个元素设置CSS样式：white-space: normal; word-break: break-all;。 3. white-space属性用于设置如何处理元素中的空白符，normal表示使用浏览器默认的处理方式。 4. word-break属性用于设置在什么位置断开单词换行，break-all表示在任意字符处换行。 完整的CSS样式如下： ``` .layui-table-box { white-space: normal; word-break: break-all; } ``` 这样设置之后，表头的内容就可以根据内容自动换行了。 ### 回答2： 在Layui的table组件中，默认情况下，表头的宽度是根据内容自动调整的，当表头的内容过长时，会自动换行显示。为了保证表头的内容完整显示，可以通过设置表头的CSS样式来控制宽度和换行。 首先，可以通过设置表头单元格的宽度来限定表头的宽度。可以使用CSS中的`width`属性来设置单元格的宽度，例如： ```css th { width: 100px; } ``` 通过设置单元格的宽度，可以控制表头的宽度，避免内容过长而导致的换行显示。 另外，如果单元格中的内容仍然过长，可以通过设置表头单元格的`white-space`属性来实现自动换行。可以使用CSS中的`white-space: normal;`属性来实现自动换行，例如： ```css th { white-space: normal; } ``` 通过设置`white-space`属性为`normal`，当表头内容过长时，会自动进行换行显示。 综上所述，可以通过设置表头单元格的宽度和使用`white-space`属性来控制表头的宽度和自动换行。在CSS中使用类似以下的样式设置： ```css th { width: 100px; white-space: normal; } ``` 这样就可以实现在Layui的table中，当表头的宽度小于内容时，自动换行显示。 ### 回答3： Layui是一款前端开发框架，其中的table组件可以用来展示数据表格。在Layui的table中，如果表头的宽度过小，会导致文字无法完整显示，而自动换行可以解决这个问题。 实现表头宽度小自动换行的方法如下： 1. 设置表头的宽度：在Layui的table中，可以通过设置colspan属性来调整表头的宽度。根据表格的具体布局调整colspan的值，使其适应表头所需的宽度。 2. 使用CSS样式：可以通过设置CSS的样式来解决表头过窄导致文字无法完整显示的问题。可以使用"white-space: normal;"属性来实现表头文字自动换行。 3. 调整表格布局：如果上述方法仍然无法解决问题，可以尝试调整表格的整体布局，例如增加表格的宽度或减少表头的字数。 总的来说，要实现Layui的table表头宽度小自动换行，可以通过设置表头的宽度，使用CSS样式来自动换行，并根据需要调整表格的整体布局。这样就可以确保表头宽度足够大，同时在表头文字过多时自动换行，完整显示文字内容。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值