overflow:autoを設定しているtableに対してhover時に途切れず表示したい

Question

いつもお世話になっております。どうかご教授お願い致します。
質問のタイトルにもございますが、現在長いtableをoverflow:autoでスクロールさせております。

ただ、そのtableの中にhoverで表示したいコンテンツ(hoge)があり、hover時に表示をさせようと思ったのですが、当然の事ながらhogeがoverflow:autoで指定している為、hogeのサイズが大きいと途切れてしまいます。

<div class="table_wrap">
  <table>
    <thead>
   <tr>
        <th>
          コマンド
        </th>
      </tr>
    </thead>
    <tbody>
   <tr>
    <td>
         ●←これをhoverするとhogeを表示
     <div class="hoge">
     </div>
        </td>
    </tr>
    </tbody>
  </table>
</div>

.table_wrap{
width:400px;
overflow: auto;
}

table{
width:1000px;
}

.hoge{
 display:none;
}

table td:hover .hoge{
 display:block;
}

<div class="hoge"></div>の位置にこだわりはありません。 jsなどを使用して、途切れず表示する 何か良い方法はないでしょうか？ ヒントお願い致します！！

Answer 1

お世話になります。
tableを２つにわけ、１つにはoverflow:autoをかけない方法で解決しました。
ありがとうございました。

Answer 2

やり方は色々あると思いますがこんな感じでも。。。

table td:hover .hoge{
 display:block;
 width: 395px;
 height: auto;
 border: 1px solid #f00;
 word-break: break-all;
}

Comments

[LanHma]

わざわざ回答ありがとうございます！
ただ、この場合だと、親要素にoverflow:autoをしているため、hogeが切れてみえてしまいます。