Question

我正在尝试创建一个表格，其中每个单元格都有悬停时显示在其下方的其他说明。

我只想在悬停时直接在单元格下显示说明。
描述应该与单元格保持对齐，除非它超出了表格的边界，此时它应该与表格的末端正确对齐。

我已经能够使事情保持一致但是我没有找到方法来确保描述不会延伸到最后。

代码（https://jsfiddle.net/9en4v2as/3/）：

＆＃13;

.description {
  display: none;
}
table {
  position: relative;
}
td:hover .description {
  display: block;
  position: absolute;
  white-space: nowrap;
  background-color: red;
}
td:last-child:hover .description {
  right: 0;
}

＆＃13;

<table border=1>
  <tr>
    <td>
      <div class="value">Value1</div>
      <div class="description">Description of Value1</div>
    </td>
    <td>
      <div class="value">Value2</div>
      <div class="description">Description of Value2</div>
    </td>
    <td>
      <div class="value">Value3</div>
      <div class="description">Description of Value3</div>
    </td>
    <td>
      <div class="value">Value4</div>
      <div class="description">Unknown description length</div>
    </td>
    <td>
      <div class="value">Value5</div>
      <div class="description">Description of Value5</div>
    </td>
    <td>
      <div class="value">Value6</div>
      <div class="description">Description of Value6</div>
    </td>
  </tr>
</table>

＆＃13;

Answer 1

使用jquery

$(document).ready(function(){

    //get width table
    var w_table = $("table").width();
    var w_description;

    $("table td").hover(function(){

        //sum width td
        var w_td = 0;

       //get hover position
       var pos = $(this).index();

       $("table td").each(function(i){
           //sum width td until hover position
           w_td = w_td + $(this).width();
           if(i==pos)
              return false;
       });
       //get description width
       w_description = $(this).find(".description").width();

       //if width description+width td > width table
       if(w_description+w_td > w_table)
          $(this).find(".description").css("right",w_table-w_td-30);
    });
});

Test here

CSS位置绝对不会超出容器

1 个答案: