页面中table宽度设置width="600px"之后,宽度仍然不是固定的,文字太长后不换行,把table都撑变形了。

解决办法:

table 设置 宽度,绝对宽度和相对都可以

table-layout:fixed ;

并且,第一行的<td>设置宽度,留一个不设,自由伸缩。

这样操作之后,table是宽度固定了,但是里面的文章如果很长,文字还是会跑出来

解决办法:

在 td 里面 加上 style="word-wrap:break-word;" 自动换行就好了,如果不想换行,可以将超出内容设为隐藏,并且用省略号代替:

在td上面加

overflow:hidden;
              white-space:nowrap;
              text-overflow:ellipsis;(目前仅在IE8测试通过)

设置table的td宽度,不随文字变宽的更多相关文章

  1. 前端福利之个性化设置table的td宽度(总结)

    很多时候,我们在用到table时,都希望随意设置 每个单元格的宽度,而不希望单元格被内容撑开table的样式. 1.首先,设置table的宽度 width=“1000” 或者 width=“100%” ...

  2. table中td的宽度不随文字变宽

    1.设置了table的宽度后,宽度仍然不固定,td的内容一多,很容易吧table撑变形.有些时候我们需要设置固定的宽度. 解决办法 table的css 加入样式  table-layout:fixed ...

  3. css控制table的td宽度

    今天发现即使设置table的td.th宽度,仍是不管用,是根据table的td的内容来适应宽度,导致其他的th.td丢失. 下图就是浏览器渲染的table,导致缺失"端口"这一列, ...

  4. layui静态表格固定td宽度,table固定td宽度

    正在做一个项目,要求数据表的列是不固定的,有可能是有10列,有可能是20列,第一列宽度要固定,然后我怎么设置都没有用, 这个问题困扰了我三天,后来终于百度到了, 这个博客: https://www.c ...

  5. 如何让table中td宽度固定

    table中td会随着里面的内容伸缩,设置其width样式并没有效果.这个时候需要下面的CSS可以实现. 首先是设置table .table {table-layout:fixed;} 其次是td . ...

  6. table调整td宽度整理-完美解决--费元星前端

    个人整理例子,留下做个备份 最终重要的几句话 0.日期格式 format="ognl:dateFormat" <td align="center"> ...

  7. HTML设置<table>的<td>横跨3列

    第一步:html中 <table> <tr> <td>列一</td> <td>列二</td> <td>列三</ ...

  8. 怎样设置table中td的高度为1px

    在制作edm时会遇到须要设置td的高度为1px,假设td标签中有 时不管你怎么设置td的高度都没用,最小高度都是18px. 这时须要把表格中的 去掉.例: 原来是这种: <tr> < ...

  9. HTML中table的td宽度无法固定问题

    设置了 width="10%" 依然会被内容撑大, 加了 style="word-break:break-all;" 属性就好了.效果是内容自动回车. 此属性不 ...

随机推荐

  1. (转)理解POST和PUT的区别,顺便提下RESTful

    这两个方法咋一看都可以更新资源,但是有本质区别的 具体定义可以百度,我这里就不贴了,光说我自己的理解 首先解释幂等,幂等是数学的一个用语,对于单个输入或者无输入的运算方法,如果每次都是同样的结果,则称 ...

  2. 页面中的CSS性能优化

    大型网站中会有多个CSS文件,性能优化是不要的.主要有以下几个方法: 一:压缩样式表: 通过构建工具压缩CSS文件,能够减少文件的大小,从而得到更快的下载.解析和执行.对于使用预处理器例如 Sass, ...

  3. python 中list的操作(循环、切片、增、删、改、查、反转、排序)

    列表的索引(下标)从0开始,最后一个可以用-1表示. 1. 循环 如果直接for 循环一个list 的时候,那么每次循环的都是这个List里的元素 2. 切片 可指定步长进行取值,步长默认为1 3. ...

  4. Postman中使用Postman Interceptor 发送带Cookie 的请求

    使用Postman 发送Cookie 的请求时,发现无法发送成功, 显示"Restricted Header (use Postman Interceptor)" 提示. 网上搜了 ...

  5. xphrof出现502问题

    This is an xhprof bug and not a devel bug, but I thought I'd throw the workaround up here in case pe ...

  6. 【转】C#操作xml

    XML文件是一种常用的文件格式,例如WinForm里面的app.config以及Web程序中的web.config文件,还有许多重要的场所都有它的身影.Xml是Internet环境中跨平台的,依赖于内 ...

  7. Linux中Qt的安装

    1.下载Ot安装包 Qt5.30的下载地址如下,在网页中打开找到需要的资源,下载.run格式的安装软件. http://download.qt.io/archive/qt/5.3/5.3.0/qt-o ...

  8. Decker hello world

    Docker 允许在容器内运行应用程序, 使用 docker run 命令来在容器内运行一个应用程序. 输出Hello world root@ranxf:/home/ranxf# docker run ...

  9. ThinkPHP项目 公共方法存放位置

    ThinkPHP项目公共方法写在   根目录-> app-> common 里面 ThinkPHP模板公共方法卸载   根目录->app->模块名称->common  里 ...

  10. linux卸载mysql

    第二.停止MYSQL运行以及卸载老版本 service mysqld stop #暂停MYSQL yum remove mysql mysql-*  #卸载老版本MYSQL 通过上面的命令,我们先停止 ...