表格td使用百分比宽度 超出显示省略号，鼠标悬浮显示完整信息。样式设置，难点分析

欢迎来到Altaba的博客 2017年2月20日

大家在前端编写过程中，难免会遇到表格问题，要求不高的话表格相信大家会首选bootstrap里面的样式，响应式的表格大小是最省事的，可是前端工作中难免会遇到一些奇葩的需求，这时候对于喜欢编写js代码突然去研究CSS的样式问题，会烦死，下面是本人为了解决：表格大小要响应式，每个td占用的大小用百分比确定好，虽然宽度大小会随着页面大小变化，但是对应的宽度百分比不变，表格在小尺寸页面的情况下内容不能把td撑大，超出就用省略号代替，鼠标悬浮上显示完整的内容。这个需求看上去不难，自己做起来会发现很多问题。

头痛的是当td宽度用百分比固定好的时候，即使设置了

 white-space:nowrap;/*文本不会换行，在同一行显示*/
 overflow:hidden;超出隐藏
 text-overflow:ellipsis;省略号显示

会发现表格每个td还是被撑开

当每个td用固定的px设置好，就不会被撑开，那这样就不满足响应式了

怎么办？？？

办法在这

在table上加一个样式：

 table-layout: fixed;/*列宽由表格宽度和列宽度设定。*/

这样问题就解决了，还有，鼠标悬浮显示td里面的完整的内容，当我想到这个问题的时候，我首先想到的是用JS去弄一个提示tab,这时候发现网上有这种解决方法

在每个td上面加一个属性 title=“完整内容”，这个适用于动态加载表格时候使用，使用字符串拼接，title的值从后台拼接上去。及其的简单方便，我不会告诉你很多网页版的音乐网站都是那个悬浮显示完整信息都是这么干的。