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

最新推荐文章于 2024-01-24 10:43:09 发布

hqmln

最新推荐文章于 2024-01-24 10:43:09 发布

阅读量1.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： html 文章标签： c# javascript 数据库 ViewUI

本文链接：https://blog.youkuaiyun.com/hqmln/article/details/84481407

html 专栏收录该内容

19 篇文章

订阅专栏

本文介绍如何通过设置表格的table-layout属性为fixed，并结合word-wrap属性为break-word来实现表格单元格内的文字自动换行，确保即使文字过长也不会超出设定的宽度。

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

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

主要需要两部：

1.设置表格table的样式为style="table-layout:fixed;"

2.然后设置td的样式为style="word-wrap:break-word;"

代码如下：

<table width="88%" class="table1 tc mt10" style="table-layout:fixed;" >
	<tr class="evertop">
		<th width="7%">序号</th>
		<th width="12%">姓名</th>
		<th width="12%">证件类型</th>
		<th width="14%">证件号</th>
		<th width="7%">性别</th>
		<th width="12%">出生日期</th>
		<th width="12%">手机号</th>
		<th width="14%">电子邮箱</th>
		<th width="7%">操作</th>
	</tr>
								
	<tr  class='on'>
		<td>1</td>
		<td>中秋加班班25</td>
		<td>&#23621;&#27665;&#36523;&#20221;&#35777;</td>
		<td>711674650903444564</td>
		<td>女</td>
		<td style="word-wrap:break-word;"></td>
		<td style="word-wrap:break-word;">c2VydmVyQ3Nw|bzNH6t4DSLhjUqdg2OLkrnQ3EXceQeppPo0BYItTPtbJPImIgCW3uS9vEw3lQ55cx0kNVdszP42odrIqNoWGTrZFruSmnEmAlwl2UTejZwGZ5Q8yyWx5TmjuarkUbRYXZpypMukoyxX2VPmXJIiHUaZQM6hzssEXlQ1563nEl4w=</td>
		<td>pp25@qq.com</td>
		<td><a href="javascript:view('b23f9597-6fd2-48c5-b5fd-e1aae8d5225b')" class="search-btn2 mlr5" >详情</a></td>
	</tr>						
	<tr >
		<td>2</td>
		<td>中秋加班班54</td>
		<td>&#23621;&#27665;&#36523;&#20221;&#35777;</td>
		<td>308926257733043268</td>
		<td>女</td>
		<td style="word-wrap:break-word;"></td>
		<td style="word-wrap:break-word;">8827768271</td>
		<td>pp54@qq.com</td>
		<td><a href="javascript:view('af1005c4-48cd-4e3c-8bc6-2af84dbddd15')" class="search-btn2 mlr5" >详情</a></td>	 
	</tr>
</table>