可以直接这样写:
HTML如何让table中的td内容过长显示为固定长度,多余部分用省略号代替
这个问题呢,是由于我们公司测试的部门测出来的,虽然说测试的内容本身就是个BUG,不过这个也让我学到了一个比较好的归类于布局的一个小技巧,就是将td标签中过长的内容只显示为这个td的width的长度,之后的便以省略号代替。
方式如下:
这个功能有一个前提,在table中必须设置style:
table-layout: fixed
这条属性就是让table的内部布局固定大小。这个时候就用width属性调节td的长度。
之后在添加如下:属性描述
white-space:nowrap规定段落中的文本不进行换行
overflow:hidden关闭滚动条
text-overflow: ellipsis溢出的文字显示为省略号
这个时候你会发现,就算变成了省略号,就会出现不知道内容完整的是什么?
所以这个时候可以考虑使用td的title属性,在title属性中设置内容为显示内容,这样只要光标停留在td处就可以显示全部的内容,如果觉得这个不够劲。可以考虑自己写一个mouseover事件,让内容全部显示,显示的方式是自动换行,如果不换行就会出现很难看的样式。
so:换行也需要table-layout: fixed
在(IE浏览器)长串英文自动回行
方法1:同时加入word-wrap:break-word
<tr></tr>、<td></td>属于HTML语言标签,含义如下:
1、tr 标签 ,代表HTML表格中的一行,tr标签是成对出现的,以<tr>开始,以</tr>结束。例如,
<table border="1">
<tr>(开始)
<th>Month</th>
<th>Savings</th>
</tr>(结束)
2、td 标签 , 代表HTML表格中的一个单元格,td标签是成对出现的,以<td>开始,以</td>结束。例如,
<table border="1">
<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
</table>
扩展资料HTML 表格有两种单元格类型:
表头单元格 - 包含头部信息(由 <th>元素创建)
标准单元格 - 包含数据(由 <td>元素创建)
<th>元素中的文本通常呈现为粗体并且居中。
<td>元素中的文本通常是普通的左对齐文本。
如果需要将内容横跨多个行或列,请使用 colspan 和 rowspan 属性。
参考资料来源:百度百科-TD (HTML标签)
参考资料来源:百度百科-TR (HTML语言标签)
表格由 <table>标签来定义。每个表格均有若干行(由 <tr>标签定义),每行被分割为若干单元格(由 <td>标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。表格和边框属性
如果不定义边框属性,表格将不显示边框。有时这很有用,但是大多数时候,我们希望显示边框。
使用边框属性来显示一个带有边框的表格:
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
表格的表头
表格的表头使用 <th>标签进行定义。
大多数浏览器会把表头显示为粗体居中的文本:
表格中的空单元格
在一些浏览器中,没有内容的表格单元显示得不太好。如果某个单元格是空的(没有内容),浏览器可能无法显示出这个单元格的边框。
注意:这个空的单元格的边框没有被显示出来。为了避免这种情况,在空单元格中添加一个空格占位符,就可以将边框显示出来。