页面table中td列内容过多---美化处理

需求

页面展示列表的时候，有时会出现某列列表的内容太长而使展示列表不美观。为此问题，设计列表的过长内容用省略号显示，并且点击td内容，可以显示全部内容。

代码

- css

  table {
            table-layout:fixed;/*table的内部布局固定大小，才可以通过td的width控制宽度*/
            word-wrap:break-word; /*允许长单词换到下一行*/


        }

        .table thead tr th, .table tbody tr td {
            vertical-align: middle;
            text-align: center;
            white-space: nowrap;/*规定段落的文本不进行换行*/
            overflow: hidden;/*超出隐藏*/
            text-overflow: ellipsis;/*隐藏的字符用省略号表示  IE*/
            -moz-text-overflow: ellipsis;/*隐藏的字符用省略号表示  火狐*/
		}

• js代码–点击td显示全部内容

$(".td1").on("click",function() {
                if (this.offsetWidth < this.scrollWidth) {
                    var that = this;
                    var text = $(this).text();
                    layer.alert(text);
                }
            });

以上是对其中某列做的处理，所以这里用的class属性，若是对所有td都进行处理，则换成以下

$("td").on("click",function() {
                if (this.offsetWidth < this.scrollWidth) {
                    var that = this;
                    var text = $(this).text();
                    layer.alert(text);
                }
            });

- html 页面table代码：

<table id="contentTable" >
	<thead>
	<tr>
		<th>申请件编号</th>
		<th>产品代码</th>
		<th>异常节点</th>
		<th>处理结果</th>
		<th>处理人</th>
		<th>处理时间</th>
		<th class="td1">异常原因</th>
	</tr>
	</thead>
    <col style="width: 15%" />
    <col style="width: 7%" />
    <col style="width: 15%" />
    <col style="width: 15%" />
    <col style="width: 7%" />
    <col style="width: 14%" />
    <col style="width: 27%" />
	<tbody >
		<tr>
			<td >appNo</td>
			<td>productcd</td>
			<td>ctName</td>
			<td >procResult</td>
			<td >procUser</td>
			<td>time</td>
			<td class="td1">msg</td>
		</tr>
	</tbody>
</table>

注意

css中table使用 table-layout:fixed;可能会使td宽度失效，解决如下：

<!--在tbody前加入，有几列就添加几个<col>，按照100%拆分-->
	<col style="width: 15%" />
    <col style="width: 7%" />
    <col style="width: 15%" />
    <col style="width: 15%" />
    <col style="width: 7%" />
    <col style="width: 14%" />
    <col style="width: 27%" />

页面效果