table内容超出固定宽度显示点点点,宽度自适应

1.这是JS  鼠标悬停显示全部隐藏的内容 

/**
 * initHoverTitle
 * 使用说明:参数(id的名称字符串格式,表格td的要显示全部的class名称字符串格式)
 * table必须添加类.table_ellipsis,
 * td必须添加class为.td_ell
 * td内容用 <span class="ell">内容</span> 嵌套
 * @param idname
 * @param contentClassName
 */
function initShowContent(idname,contentClassName){
    var _table=$("#"+idname +" "+"."+contentClassName);
    var cellIndex1 = parseInt(_table.length) - 1;
    _table.each(function() {
        if (this.cellIndex != cellIndex1) {
            $(this).attr("title", $(this).text());
        }
    });
}

 2.这里是使用的嵌套方式,table加table_ellipsis样式,要控制的td添加class="td_ell" 嵌套一个span 添加class="ell"  此元素上定义宽度

/*表格内容超出内容点点点,不影响table自适应宽度*/
.table_ellipsis td {
    word-break: keep-all; /* 不换行 */
    white-space: nowrap; /* 不换行 */
}

.table_ellipsis td.td_ell {
    overflow: hidden;
    text-overflow: ellipsis;
}

.ell {
    display: inline-block;
    word-break: keep-all; /* 不换行 */
    white-space: nowrap; /* 不换行 */
    overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow: ellipsis; /* for IE */
    -moz-text-overflow: ellipsis; /* for Firefox,mozilla,在chrome中测试也通过了*/
}

<div class="divContainBox" id="containBox">
	<table id="tabColor" class="tab table_ellipsis" border="0" cellspacing="0"     width="100%" style="border-collapse: collapse;">
		<tr>
			<td class="tHead paddingLeft_10" width="30">序号</td>
			<td class="tHead">登记日期</td>
			<td class="tHead">操作员账号</td>
			<td class="tHead">操作员姓名</td>
			<td class="tHead">备注</td>
		</tr>
		<tr class="tabTr">
			<td class="paddingLeft_10">1</td>
			<td>2018-12-24</td>
			<td>xqq</td>
			<td>寒寒</td>
			<td class="td_ell">
				<span class="ell" style="width: 160px;">这是备注</span>
			</td>
		</tr>
	</table>
</div>

3.调用方式 

$(document).ready(function() {
	initShowContent("containBox","td_ell");
});