在WEB页面中根据分辨率自动调整内容宽度，以适应表格宽度

最新推荐文章于 2021-05-30 18:59:09 发布
最新推荐文章于 2021-05-30 18:59:09 发布
阅读量3.2k 收藏 1
点赞数
文章标签： web 测试 浏览器 email border ie
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cuizm/article/details/874112
版权

 本文演示了，当表格列内的文字过多的时候，会自动根据当前显示器的分辨率进行调整，多余的内容以“...”的形式显示。
用鼠标调整IE浏览器的宽度，查看表格的备注列的内容，就可以看到演示效果。

作者：崔占民
Email:cuizm@163.com
Web:http://www.j2soft.cn/

文件源码可以到我的网站上下载：http://www.j2soft.cn/

演代码如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>自动调整宽度演示</title>
</head>

<body>
本文演示了，当表格列内的文字过多的时候，会自动根据当前显示器的分辨率进行调整，多余的内容以“...”的形式显示。<br>
用鼠标调整IE浏览器的宽度，查看表格的备注列的内容，就可以看到演示效果。<br><br>
<table width="100%" border="1" cellspacing="0" cellpadding="0" style="table-layout:fixed;">
    <tr>
        <td width="7%" height="25" align="center" valign="middle">序号</td>
        <td width="12%" height="25" align="center" valign="middle">姓名</td>
        <td width="8%" height="25" align="center" valign="middle">性别</td>
        <td width="12%" height="25" align="center" valign="middle">年龄</td>
        <td width="61%" height="25" align="center" valign="middle" style="overflow:hidden;text-overflow:ellipsis"><nobr>备注（调整IE宽度，然后观察此列内容后面的...）</nobr></td>
    </tr>
    <tr>
        <td height="25" align="center" valign="middle">1</td>
        <td height="25" align="center" valign="middle">张三</td>
        <td height="25" align="center" valign="middle">男</td>
        <td height="25" align="center" valign="middle">32</td>
        <td height="25" align="left" valign="middle" style="overflow:hidden;text-overflow:ellipsis"><nobr>所选内容的摘要：未对当前选定内容应用任何CSS属性。请选择一个带样式的元素，查看应用了哪些CSS属性</nobr></td>
    </tr>
    <tr>
        <td height="25" align="center" valign="middle">2</td>
        <td height="25" align="center" valign="middle">李四</td>
        <td height="25" align="center" valign="middle">女</td>
        <td height="25" align="center" valign="middle">25</td>
        <td height="25" align="left" valign="middle" style="overflow:hidden;text-overflow:ellipsis"><nobr>本文演示了，当表格列内的文字过多的时候，会自动根据当前显示器的分辨率进行调整，多余的内容以“...”的形式显示。</nobr></td>
    </tr>
    <tr>
        <td height="25" align="center" valign="middle">3</td>
        <td height="25" align="center" valign="middle">王五</td>
        <td height="25" align="center" valign="middle">女</td>
        <td height="25" align="center" valign="middle">28</td>
        <td height="25" align="left" valign="middle" style="overflow:hidden;text-overflow:ellipsis"><nobr>作者：崔占民；　EMAIL：cuizm@163.com　　http://www.j2soft.cn/　网站上有源码下载，欢迎下载；</nobr></td>
    </tr>
    <tr>
        <td height="25" align="center" valign="middle">4</td>
        <td height="25" align="center" valign="middle">赵六</td>
        <td height="25" align="center" valign="middle">男</td>
        <td height="25" align="center" valign="middle">30</td>
        <td height="25" align="left" valign="middle" style="overflow:hidden;text-overflow:ellipsis"><nobr>测试数据 测试数据 测试数据 测试数据 测试数据 测试数据 测试数据 测试数据 测试数据 测试数据 测试数据 测试数据 测试数据 测试数据 测试数据 测试数据 测试数据 </nobr></td>
    </tr>
    <tr>
        <td height="25" align="center" valign="middle">5</td>
        <td height="25" align="center" valign="middle">刘七</td>
        <td height="25" align="center" valign="middle">男</td>
        <td height="25" align="center" valign="middle">29</td>
        <td height="25" align="left" valign="middle" style="overflow:hidden;text-overflow:ellipsis"><nobr>测试数据 测试数据 测试数据 测试数据 测试数据 测试数据 测试数据 测试数据 测试数据 测试数据 测试数据 测试数据 测试数据 测试数据 测试数据 测试数据 测试数据 </nobr></td>
    </tr>
</table>
</body>
</html>

射天狼
关注
web页面表格、复选框、调整列宽——20181126
sunshine102548的博客
11-26 1701
数据解析后，根据数据内容在页面上通过表格显示出来，同时添加了复选框和修改列宽的内容。 &lt;!DOCTYPE html&gt; &lt;html &gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;script type="text/javascript" src="https://cdn.bootcss.com/jquery/3
table自适应宽度
weixin_34248849的博客
06-28 3518
WEB应用的页面，表格的表现形式是常常遇到的，在列数有限的前提下，如何将各列中的内容自适应到不同分辨率的屏幕，这应该是一个比较容易遇到的问题，下面就来谈一谈我对这类问题的解决与看法。 将所有列设置为固定宽度，显然是不能满足此类要求的，但是若把全部的列都设置为百分比，恐怕在某些尺寸，或分辨率下，会变得很难看。在Bigtree看来，比较习惯于用如下的方式来处理——在表格列数不是很多的前提下——...
响应式Web设计网页随分辨率自适应
qizhanfeng的专栏
06-16 612
http://blog.sina.com.cn/s/blog_4ba291330101j9jp.html http://blog.sina.com.cn/s/blog_4ba291330101j9kr.html 响应式Web设计：网页随分辨率自适应 (2013-01-29 16:34:43) 转载▼ 标签： css web自适应 分辨率 全屏 it 分类： 设计心得 响...
如何让网页自适应电脑屏幕分辨率
Qcherlsh的博客
07-26 5485
很多人会遇到这样的问题，当你在自己的电脑上精心制作好网页，却发现在别人的不同分辨率的电脑上浏览你的页面时，自己的网页排版乱得一塌糊涂，或者被拉伸，或者被压缩，要不就是不能完整显示在屏幕内。这是为什么呢？因为通常初学者朋友都按照自己的屏幕分辨率对网页进行设计，但是却没有考虑到网友们可能使用了别的屏幕分辨率。 目前，网友们上网通常会采用800×600、1024×768两种分辨率，由于网页不是用来给
html表格高度自动调整,table表格自适应高度的办法
weixin_29215969的博客
05-30 5929
这篇文章主要为大家详细介绍了table表格自适应高度的办法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。关于自适应高度，361源码在以前给大家介绍过iframe的自适应高度的方法，有需要了解的朋友可以参看《如何通过javascript或者jquery实现iframe自适应内容高度和宽度》一文。昨天在制作专题中需要做一个单价展示的内容，用到了table元素，但...
HTML页面自适应宽度的table(表格)
11-19
在构建Web应用时，设计页面以适应不同分辨率和设备的屏幕是至关重要的。HTML表格作为数据展示的重要元素，也需要能够自适应布局。本篇文章主要探讨如何实现HTML页面中表格的自适应宽度，使得内容能够在各种屏幕尺寸...
数据表格JqGrid自适应列宽度
04-16
首先，JqGrid允许用户根据屏幕尺寸或窗口大小自动调整列宽，以优化用户体验。这种自适应性是现代Web应用中必不可少的一个特性，特别是考虑到响应式设计的普及。自适应列宽度可以使表格在不同设备和屏幕分辨率下保持...
CSS教程:表格的nobr终极解决方案
09-27
在液态布局（liquid layout）中，即页面宽度可随浏览器窗口大小变化的布局，不建议为表格设置绝对宽度。相反，使用相对单位，如百分比，可以让表格更好地适应不同屏幕尺寸。对于那些内容宽度相对固定的单元格，可以...
web前端-设计网站页面
最新发布
03-17
在Web前端开发中，设计网站页面是至关重要的一步，它涉及到用户界面的美观与功能性的融合，以及良好的用户体验。Bootstrap框架作为业界广泛使用的工具，常常被用于快速构建响应式和移动优先的网页设计。本节我们将...
jQuery 获取屏幕高度、宽度的简单实现案例
10-22
在进行Web开发的过程中，尤其是响应式设计，获取屏幕的宽度和高度是非常常见的需求，因为这有助于构建适应不同设备和分辨率的页面布局。 在jQuery中，可以非常便捷地获取浏览器窗口的可视区域尺寸，以及整个文档的...
JS动态设置表格高度、宽度
10-10
JS动态设置表格高度、宽度所有浏览器全兼容
如何让网页版面更适合浏览者呢?这里有技巧
weixin_34324081的博客
08-24 137
刚做好网页的朋友们经常收到网友们的反馈，说自己的网页排版乱得一塌糊涂，或者被拉伸，或者被压缩，要不就是不能完整显示在屏幕内。这是为什么呢？因为通常初学者朋友都按照自己的屏幕分辨率对网页进行设计，但是却没有考虑到网友们可能使用了别的屏幕分辨率，以至于看起来版面混乱。  目前，网友们上网通常会采用800×600、1024×768两种分辨率，由于网页不是用来给自己看的，所以我们必须让自己的网页能够兼顾这...
如何让网页适应所有的屏幕宽度+表格根据内容自适应
zhaolisha9232的博客
04-01 7129
1.HTML中，表格根据内容自适应宽度 td { white-space: nowrap; } 亲试，可以 2.如何实现网页使用所有的屏幕宽度 原则：不使用绝对宽度由于网页会根据屏幕宽度调整布局， 所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。 具体说，CSS代码不能指定像素宽度：width:xxx px;
静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别
wy983948599的博客
07-11 1351
一、静态布局（Static Layout）即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。1、布局特点：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见与pc端。2、设计方法：　　PC：居中布局，所有样...
响应式Web设计
别样的博客
04-01 2008
本文转载自Be For Web与自适应网页设计（Responsive Web Design） 1. 响应式Web设计的概念 现状：手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是1366×768），有的还达到了2000像素。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。   2010年，Ethan Marcott...
Web前端Table中的tr和td按百分比设定宽度和高度，当内容超出时Table变型解决
热门推荐
EugeneHeen
04-17 4万+
如果table按照百分比设定宽度和高度，当表格内部任意内容超出所在元素的百分比值时就会使得表格变形。 内容超过50% 当内容超过50%时，就会使Table变形。此时只需在table标签上设置style=''的table-layout:fixed。 表示：固定布局的算法。在这算法中，水平布局是仅仅基于表格的宽度，表格边框的宽度，单元格间距，列的宽度，而和表格内容无关。
elementui的el-table根据列内容长度自适应调整列宽
树上骑个猴的博客
08-06 1万+
应用： <el-table-column prop="paperNumber" :width="flexColumnWidth('paperNumber',viceTableData)" label="单号" align="center" /> 在methods{ }里写声明函数: flexColumnWidth(str,tableData,flag='max') { // str为该列的字段名(传字符串);tableData为该表格的数据
web开发中获取的各种高度和宽度
u010603896的专栏
09-15 532
前端开发中经常需要获取页面还有屏幕的高度和宽度进行计算,此文即介绍如何用 JavaScript 还有 jQuery 获取这些尺寸. 1.简介 一个页面显示在浏览器内,浏览器又放置在屏幕窗口内,所以由里向外便是 页面 , 浏览器 , 屏幕 三者.  展示图:  2.屏幕尺寸 screen.availHeight:屏幕可用高度screen.availWidth:屏
使用负边距创建自适应宽度流体布局
在网页设计中，自适应布局是一种重要的技术，它使得网页能够根据用户设备的屏幕尺寸自动调整其布局，提供良好的用户体验。负边距是一种在CSS中用于调整元素位置的技巧，它允许元素超出其父元素的边界，从而在特定...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值