让文字自动适应表格宽度(CSS)

最新推荐文章于 2025-06-09 13:31:24 发布
原创 最新推荐文章于 2025-06-09 13:31:24 发布 · 5.3k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #table #mozilla #ie #html #border

本文介绍了一种利用CSS样式实现表格中文字自动适应宽度的方法，通过设置table-layout:fixed等属性使超出宽度的文字自动隐藏并显示省略号。

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>

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

<BODY>
 <table cellSpacing="0" cellpadding="1" width="100%" class="auto_arrange" border=1>


 <tr>
    <td>让文字自动适应Table宽度让文字自动适应Table宽度让文字自动适应Table宽度让文字自动适应Table宽度让文字自动适应Table宽度</td>
    <td width="54">(1/4)</td>
 </tr>
 <tr>
    <td>让文字自动适应Table宽度让文字自动适应Table宽度让文字自动适应Table宽度让文字自动适应Table宽度让文字自动适应Table宽度</td>
    <td width="54">(2/4)</td>
 </tr>
 <tr>
    <td>让文字自动适应Table宽度让文字自动适应Table宽度让文字自动适应Table宽度让文字自动适应Table宽度让文字自动适应Table宽度</td>
    <td width="54">(3/4)</td>
 </tr>
 <tr>
    <td>让文字自动适应Table宽度让文字自动适应Table宽度让文字自动适应Table宽度让文字自动适应Table宽度让文字自动适应Table宽度</td>
    <td width="54">(4/4)</td>
 </tr>

 </table>
</BODY>
</HTML>

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

关键样式:
table-layout:fixed 固定布局的算法,则表格被呈递的默认宽度为 100% (For IE,Mozilla)
text-overflow:ellipsis 当对象内文本溢出时显示省略标记(...) (For IE)
overflow:hidden 不显示超过对象尺寸的内容 (For IE,Mozilla)
white-space: nowrap 强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象 (For IE,Mozilla)

table宽度一样宽_table样式测试总结tr td宽度分析
weixin_35922953的博客
12-24 784
题外话：一直以来习惯布局用ul,li样式调整比较方便，不会互相影响出现一些问题，but~现在公司涉及很多表格打印，都是用table写的，好多宽度高度合并啊，组合啊~~~，单元格之间互相影响，有的样式设置还不起作用。。。。。脑瓜疼啊！脑瓜疼~~~废话说了一堆，撸起袖子继续干吧！首先定义一个基础的tabletable tr td{background: #cde8e5}123显示效果：注意：蓝色部分不...
css实现一个元素高度固定宽度按比例显示效果
12-14
用padding-top百分比可以实现宽度固定高度按比例展示，现在的需求是对一个video视频的盒子div高度是固定的，宽度如何按比例展示？ 解决后效果如图： 红框标注的即是我在上面高度比例固定的范围内宽度自适应的效果； css代码： .content { margin: 0 auto; height: 79vh; .video_box { position: relative; height: 100%; overflow: hidden; margin: 0 auto;
DIV+CSS实现自适应表格布局
AlbertYang的博客
04-03 4041
效果： 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style type="text/css"&...
CSS设置元素的宽度根据其内容自动调整
最新发布
HWL5679的博客
06-09 793
width: fit-content 是 CSS 中的一个属性值，用于设置元素的宽度根据其内容自动调整，确保宽度刚好容纳内容而不会超出。
css实现两列布局，一列固定宽度，一列宽度自适应方法
low666的博客
04-08 1643
css实现两列布局，一列固定宽度，一列宽度自适应方法 固定宽度区浮动，自适应区不设宽度而设置 margin <div id="wrap"> <div id="sidebar" style="height:500px;background:red;color:#fff;">固定宽度区</div> <div id="content" style="he...
html自适应_table元素在自适应布局中的自适应性
weixin_39588445的博客
12-01 706
在HTML5自适应布局技术独步天下的今天，table是一个不鼓励使用的HTML标记，但现实工作中，我们避免不了的偶尔会用到它。那么，怎样让一个传统的表格也表现出自适应性呢？网上有很多种解决方案，最常见的是配合JavaScript。css-tricks里给出了一个用纯CSS实现的，但它需要将一些业务数据写在CSS里。而本文在这里将提到的一种方法也是用纯CSS实现表格的自适应布局，而且CSS只负责表现...
html/css表格随着内容自动适应宽度
xxtz0522的博客
11-06 1万+
css代码： td{ white-space: nowrap; } 效果：
html、css 禁止文字自动换行属性word-break
09-25
然而，在某些情况下，比如在固定宽度的`<td>`（表格单元格）内，如果单词过长，可能就会导致表格的布局被破坏。这时，就需要使用`word-break`属性来控制文本的换行行为。 `word-break`属性有几个值可选： 1. `...
css控制文本实现越界省略号以及自动换行
09-25
如果你希望文本在遇到边界时自动换行以适应容器，可以使用`word-break`和`white-space`属性。以下是一个例子： ```css .autowrap { word-break: break-all; /* 允许单词在任何位置断行 */ white-space: normal; /...
CSS 文字自动换行
06-29
### CSS文字自动换行 #### 知识点一：CSS自动换行的原理与方法 在Web开发中，实现文本的自动换行是一项常见的需求。本文档主要介绍了如何利用CSS来实现不同浏览器环境下的自动换行功能，并特别关注了对老旧浏览器...
CSS超出文本指定宽度用省略号代替和文本不换行
09-24
/* 表格宽度 */ table-layout: fixed; /* 确保td的宽度生效 */ } td { width: 50%; /* 单元格宽度 */ word-break: keep-all; /* 不换行 */ white-space: nowrap; /* 不换行 */ overflow: hidden; /* 隐藏...
css之自动换行实现代码
09-25
在网页布局中，CSS（层叠样式表）为我们提供了多种方式控制文本的自动换行，以此来适应不同的布局需求。当我们遇到连续的英文字符和阿拉伯数字将容器撑大导致布局问题时，可以通过CSS中的特定属性来实现对文本的自动...
el-table自适应缩放大小
Passerby_K的博客
08-14 1710
el-table 自适应缩放大小
css文字大小自适应
qq_37669585的博客
05-18 8523
总结了一下一些单位的不同 px：像素（pixel）相对长度单位，，是相对于屏幕显示器分辨率而言的； em：em的值并不是固定的，会集成父级元素的字体大小； 注意： 1.body选择其中声明Font-size=62.5%； 2.将原来的px数值除以10，然后换上em作为单位； 3.重新计算那些被放大的字体的em数值。避免字体大小的重复声明。 任何浏览器默认字体大小都是16px，所有未经调整的浏览器都符合1em=16px，南无0.75em=12px，10px=0.625em。为了简化Font-size的换算，需
css实现文字大小自适应
热门推荐
分享互联网的有趣知识~
03-18 2万+
在页面编写中经常会碰到页面自适应的问题，也就是页面内部的元素会随着窗口的放大缩小而放大缩小，通过百分比的形式做到页面自适应，但是box内的字体却无法做到这点，往往box自适应大小了，内部的字体还是原来的大小，看起来会非常别扭，下面就来css实现一下页面文字的自适应大小。
table 文字自适应
lein_wang的专栏
11-10 1562
 关键样式:        table-layout:fixed 固定布局的算法,则表格被呈递的默认宽度为 100% (For IE,Mozilla)        text-overflow:ellipsis 当对象内文本溢出时显示省略标记(...) (For IE)        overflow:hidden 不显示超过对象尺寸的内容 (For IE,Mozilla)
html 使表格随着内容自动适应宽度
qasw460326327的博客
06-15 1万+
一句css解决了,仅仅靠一个属性td { white-space: nowrap; }
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值