`
流浪鱼
  • 浏览: 1682469 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

    博客分类:
  • html
 
阅读更多

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>

 

分享到:
评论

相关推荐

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

    本篇文章针对的就是这个常见的问题,即如何设置表格单元格宽度后,当内容太多无法完整显示时,可以实现自动换行的效果。 在HTML中,表格的布局和样式控制通常依赖于CSS。为了实现内容的自动换行,我们需要对table和...

    table表格某一td内容太多导致样式混乱的解决方案

    通过将`table-layout`属性设置为`fixed`,可以确保表格的宽度不再随着内容的增加而扩展。这样,即使单元格内容过多,表格的整体宽度也会保持不变,防止表格样式混乱。 2. **应用`word-break`和`word-wrap`**: - `...

    javascript 使td内容不换行不撑开

    在网页设计中,有时我们需要确保表格(`&lt;table&gt;`)中的单元格(`&lt;td&gt;`)内容不换行且不撑开单元格的宽度。这通常发生在显示长字符串或者需要控制表格布局的情况下。标题和描述中提到的问题是关于如何利用CSS来实现这...

    关于table表格中的内容溢出布局方法

    总的来说,通过合理的CSS布局和样式设置,我们可以有效地解决table表格中的内容溢出问题,保持表格的整洁和专业性。这种方法不仅适用于网页设计,也可以应用于响应式布局和移动设备优化,确保用户在各种屏幕尺寸下都...

    layui表格内容溢出的解决方法

    这个属性用于设置溢出内容的处理方式,设置为隐藏后,内容超出DIV宽度时会被裁剪。 - white-space: nowrap; 此属性设置内容不换行。 - text-overflow: ellipsis; 当文本溢出包含元素时,此属性会截断文本并显示...

    table表格的一些常用属性介绍

    在使用HTML构建网页布局时,table表格是一个非常基础且常用的元素,用于展示结构化数据。它允许开发者按照表格的方式组织内容,其中包含行(row)、列(column)以及单元格(cell)。表格的样式和布局可以通过一系列的属性...

    HTML标记一览HTML web java 网页 网站

    * `&lt;TABLE&gt;`:表格标记,设定该表格的各项参数。 * `&lt;CAPTION&gt;`:表格标题,做成一打通列以填入表格标题。 * `&lt;TR&gt;`:表格列,设定该表格的列。 * `&lt;TD&gt;`:表格栏,设定该表格的栏。 * `&lt;TH&gt;`:表格标头,相等于 `...

    html标签大全

    11. `&lt;nobr&gt;`:不允许换行标签,用于防止单词或短语因为太长而换行。 12. `&lt;wbr&gt;`:建议折行标签,允许浏览器在需要时在指定的位置进行折行。 13. `&lt;strong&gt;` 和 `&lt;b&gt;`:两者都能实现加粗效果,但`&lt;strong&gt;`强调的...

    gitpost3

    `&lt;table&gt;`用于创建表格,`&lt;tr&gt;`定义行,`&lt;th&gt;`定义表头,`&lt;td&gt;`定义单元格。例如: ```html &lt;table&gt; 姓名 年龄 &lt;td&gt;张三&lt;/td&gt; &lt;td&gt;25&lt;/td&gt; &lt;/table&gt; ``` 7. **块级和内联元素**: 块级元素如`...

    seoultopeye

    "Seoultopeye"似乎是一个项目或者工具的名称,但仅凭这个名称,我们无法获取太多关于IT知识的具体信息。然而,考虑到标签是"HTML",我们可以推测这可能与HTML(超文本标记语言)相关,HTML是网页开发的基础语言。...

    前古塔斯

    7. **表格**: `&lt;table&gt;`元素用于创建表格,`&lt;tr&gt;`代表行,`&lt;td&gt;`和`&lt;th&gt;`分别表示数据单元格和表头单元格。 8. **段落与换行`: `&lt;p&gt;`用于定义段落,` `则用于强制换行。 9. **区块元素与内联元素**: 区块元素如...

    ds

    6. **表格元素**:`&lt;table&gt;`、`&lt;tr&gt;`(行)、`&lt;td&gt;`(单元格)和`&lt;th&gt;`(表头单元格)用于创建表格。 7. **样式控制**:虽然HTML主要负责内容结构,但也可以使用`&lt;style&gt;`标签或`&lt;link&gt;`引入CSS(层叠样式表)来...

    bgtm

    7. **表格**:`&lt;table&gt;`元素用于创建表格,包括`&lt;tr&gt;`(行),`&lt;td&gt;`(单元格)和`&lt;th&gt;`(表头单元格)。 8. **块级元素和内联元素**:块级元素(如`&lt;div&gt;`,`&lt;p&gt;`)占据整个宽度并换行显示,而内联元素(如`&lt;span&gt;...

    Bowen_CC_Project_1

    5. **表格**:`&lt;table&gt;`, `&lt;tr&gt;`, `&lt;th&gt;`和`&lt;td&gt;`用于创建表格,`&lt;th&gt;`表示表头,`&lt;td&gt;`表示数据单元格。 6. **图像与媒体**:`&lt;img&gt;`元素插入图片,`&lt;audio&gt;`和`&lt;video&gt;`用于嵌入音频和视频。 7. **布局与定位**...

Global site tag (gtag.js) - Google Analytics