td 内容自动换行 table表格td设置宽度后文字太多自动换行


Posted in HTML / CSS onDecember 24, 2022

设置table 的 style="table-layout:fixed;" 然后设置td的 style="word-wrap:break-word;" 即可

但这种情况下表格宽度自由分配,所以如果不用设置table 的 style="table-layout:fixed;"直接使用下面的代码也可以实现换行

word-wrap:break-word;word-break:break-all;

案例

<table style="TABLE-LAYOUT: fixed" border="1" cellspacing="0" cellpadding="0" width="200">
    <tbody>
        <tr>
            <td style="WORD-WRAP: break-word" width="20">sssssssssssssssssssssssssssssssssssssssssssssss </td>
            <td>aaaaa</td>
        </tr>
        <tr>
            <td style="WORD-WRAP: break-word" width="20">sssssssssssssssssssssssssssssssssssssssssssssss </td>
            <td>aaaaa</td>
        </tr>
    </tbody>
</table>

例子二

<table border="1" cellspacing="0" cellpadding="0" width="200">
    <tbody>
        <tr>
            <td style="word-wrap:break-word;word-break:break-all;" width="20">sssssssssssssssssssssssssssssssssssssssssssssss </td>
            <td>aaaaa</td>
        </tr>
        <tr>
            <td style="word-wrap:break-word;word-break:break-all;" width="20">sssssssssssssssssssssssssssssssssssssssssssssss </td>
            <td>aaaaa</td>
        </tr>
    </tbody>
</table>

比较好的写法

#soft-intro table{border:1px solid #cccccc; border-collapse:collapse; text-align:center; margin-top:0.54em; clear:both;width: 100%;}
#soft-intro table th,#soft-intro table td{padding:8px; border:1px solid #dddddd;line-height:22px; text-align:left}
#soft-intro table th{background:#f9f9f9;}
#soft-intro table thead, #soft-intro table.jbborder tr {background-color:#fff;}
#soft-intro table tr:nth-child(even){background-color:#f9f9f9}
#soft-intro table tbody tr:hover {background: rgba(255,255,153,.4)}
#soft-intro table th img{display:block; margin:5px auto 0;}
#soft-intro table td{text-align:left;word-wrap:break-word;word-break:break-all;}
#soft-intro table td.version{font-weight:bold;}
#soft-intro table pre{width:auto;margin:0;padding:0;border:0;background:transparent}
#soft-intro table td p{margin:0; padding:0;line-height:22px;word-wrap:break-word;word-break:break-all;}
#soft-intro table ul{margin-top:2px;}

 

 
HTML / CSS 相关文章推荐
css3 响应式媒体查询的示例代码
Sep 25 HTML / CSS
CSS3等相关属性制作分页导航实现代码
Dec 24 HTML / CSS
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
Dec 30 HTML / CSS
使用CSS3编写类似iOS中的复选框及带开关的按钮
Apr 11 HTML / CSS
基于第一个PhoneGap(cordova)的应用详解
May 03 HTML / CSS
html5 worker 实例(一) 为什么测试不到效果
Jun 24 HTML / CSS
HTML5 CSS3打造相册效果附源码下载
Jun 16 HTML / CSS
推荐WEB开发者最佳HTML5和CSS3代码生成器
Nov 24 HTML / CSS
Html5插件教程之添加浏览器放大镜效果的商品橱窗
Jan 07 HTML / CSS
HTML5本地存储之IndexedDB
Jun 16 HTML / CSS
canvas实现滑动验证的实现示例
Aug 11 HTML / CSS
HTML5简单实现添加背景音乐的几种方法
May 12 HTML / CSS
HTML页面点击按钮关闭页面的多种方式
Dec 24 #HTML / CSS
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
Dec 24 #HTML / CSS
CSS使用SVG实现动态分布的圆环发散路径动画
Dec 24 #HTML / CSS
CSS中理解层叠性及权重如何分配
Dec 24 #HTML / CSS
CSS 鼠标点击拖拽效果的实现代码
Dec 24 #HTML / CSS
详解CSS3浏览器兼容
Dec 24 #HTML / CSS
HTML5页面打开微信小程序功能实现
Sep 23 #HTML / CSS
You might like
第二节--PHP5 的对象模型
2006/11/16 PHP
介绍几个array库的新函数 php
2006/12/29 PHP
PHP 替换模板变量实现步骤
2009/08/24 PHP
PHP开发中常用的三个表单验证函数使用小结
2010/03/03 PHP
wordpress自定义url参数实现路由功能的代码示例
2013/11/28 PHP
语义化 H1 标签
2008/01/14 Javascript
用js统计用户下载网页所需时间的脚本
2008/10/15 Javascript
一个CSS+jQuery实现的放大缩小动画效果
2014/02/19 Javascript
js实现的类似于asp数据字典的数据类型代码实例
2014/09/03 Javascript
jquery实现增加删除行的方法
2015/02/03 Javascript
js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
2015/09/02 Javascript
简单谈谈node.js 版本控制 nvm和 n
2015/10/15 Javascript
jquery实现树形菜单完整代码
2015/12/29 Javascript
第一篇初识bootstrap
2016/06/21 Javascript
AngularJS 与百度地图的结合实例
2016/10/20 Javascript
JS判断输入的字符串是否是数字的方法(正则表达式)
2016/11/29 Javascript
jQuery实现表格冻结顶栏效果
2017/08/20 jQuery
angularjs实现猜大小功能
2017/10/23 Javascript
Vue实现带进度条的文件拖动上传功能
2018/02/23 Javascript
layerUI下的绑定事件实例代码
2018/08/17 Javascript
JS前端知识点offset,scroll,client,冒泡,事件对象的应用整理总结
2019/06/27 Javascript
Node.js开发之套接字(socket)编程入门示例
2019/11/05 Javascript
详解JavaScript中的this指向问题
2021/02/05 Javascript
使用py2exe在Windows下将Python程序转为exe文件
2016/03/04 Python
Python 'takes exactly 1 argument (2 given)' Python error
2016/12/13 Python
python使用pygame模块实现坦克大战游戏
2020/03/25 Python
解决Django连接db遇到的问题
2019/08/29 Python
PyTorch加载自己的数据集实例详解
2020/03/18 Python
TensorFlow的环境配置与安装教程详解(win10+GeForce GTX1060+CUDA 9.0+cuDNN7.3+tensorflow-gpu 1.12.0+python3.5.5)
2020/06/22 Python
利用Python批量识别电子账单数据的方法
2021/02/08 Python
John Varvatos官方网站:设计师男士时装
2017/02/08 全球购物
巴西化妆品商店:Lojas Rede
2019/07/26 全球购物
线程同步的方法
2016/11/23 面试题
机械设计及其自动化专业推荐信
2013/10/31 职场文书
三年级数学教学反思
2014/01/31 职场文书
人事任命书格式
2014/06/05 职场文书