css + jq 实现表格列超出部分隐藏，完整气泡显示

嗯，又是那个 jq 老项目。表格内容多，为了表格好看，表格超出部分隐藏，鼠标移上去显示全部。

意思意思上一下页面代码：

<table>
  <th>
    <td>标题</td>
    <td>标题</td>
    <td>标题</td>
    <td>标题</td>
    <td>标题</td>
    <td>标题</td>
  </th>
  <tr>
    <td>
      <div class="bubble none"></div>
      <div class="txt">内容</div>
    </td>
    <td>一样的...</td>
    <td>一样的...</td>
    <td>一样的...</td>
    <td>一样的...</td>
    <td>一样的...</td>
  </tr>
</table>

接下来是 css：

.none{
   display: none;
}
table{
  table-layout: fixed; // 固定每一列宽度，不让换行需要
  tr td{
    position: relative;
    // 文字超出部分隐藏
    .txt{
      overflow: hidden;
      white-space: nowrap;
      word-break: keep-all;
      text-overflow: ellipsis;
    }
    //气泡
    .bubble{
      position: absolute;
      top: -10px;
      border-radius: 5px;
      background: rgba(0,0,0,.7);
      padding: 5px;
      color: #fff;
      white-space: nowrap;
      z-index: 2;
      min-width: 80px;
      &:after{
        content: '';
        width: 0;
        height: 0;
        position: absolute;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 6px solid rgba(0,0,0,.7);
        bottom: -6px;
        left: 35px;
      }
      &:before{
        content: '';
        width: 0;
        height: 0;
        position: absolute;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 5px solid rgba(0,0,0,.7);
        bottom: -5px;
        left: 35px;
        z-index: 1;
      }
    }
  }
}

js：

$('table').on('mouseenter', 'td', function(){
  var $bubble = $(this).find('.bubble'),
        txt = $(this).find('.txt').html();
   if(!txt || $.trim(txt) == '-'){
     return;
   }
   $(this).find('.bubble').removeClass('none');
    $bubble.html(txt);
}).on('mouseleave', 'td', function() {
   var $bubble = $(this).find('.bubble');
    $(this).find('.bubble').addClass('none');
    $bubble.html('');
 });

以上。
一些点：
1、之前的时候，直接对 td 进行宽度限制，文字的超出隐藏设置，发现气泡即使绝对定位，却怎么也显示不完整。然后发现气泡是在 td 里面的，当然也受 td 超出隐藏的限制。所以把文字放在一个和气泡平级的单独容器里面，直接对文字容器进行超出隐藏设置。（ps: 这个问题还找了好一会儿，不知道当时怎么想的）
2、当表格没有设置 table-layout: fixed 的时候，对 td 设置宽度不生效。如果有限制表格不能设置 table-layout: fixed，又想设置格子的宽度，可以里面单独给内容容器，设置容器宽度。