在很多場合，你會發現，當你需要模擬 select 下拉框的時候，內部盒子設置 float，由於外部的 div 設置了 overflow:hidden 以適應內部元素高度，但這樣下拉框就會被隱藏，如何設置 z-index 都無效，那該如何是好呢？？？

<div class="left">
<div class="t_left">供應商來源</div>
<div class="t_right">
<div class="inline_block select_mormal select_p">
<input type="text" class="select_input block" value="供貨商來源">
<i></i>
<ul class="select_list" style="display: none;">
　　<li>未知</li>
　　<li>線上資源</li>
　　<li>登門拜訪</li>
　　<li>陌生拜訪</li>
　　<li>招商資源</li>
　　<li>公司資源</li>
　　<li>個人資源</li>
　　<li>電話資源</li>
</ul>
</div>
</div>
</div>

後來我發現，神奇的 table 可以完美解決這個問題，td 可以不用設置 overflow:hidden

<table class="table table-bordered">
<tr>
<td>
<div class="left">
<div class="t_left">供應商來源</div>
<div class="t_right">
<div class="inline_block select_mormal select_p">
<input type="text" class="select_input block" value="供貨商來源">
<i></i>
<ul class="select_list pur_supplier_come_from_ul sbar" style="display: none;">
<li>未知</li>
<li>線上資源</li>
<li>登門拜訪</li>
<li>陌生拜訪</li>
<li>招商資源</li>
<li>公司資源</li>
<li>個人資源</li>
<li>電話資源</li>
</ul>
</div>
</div>
</div>
</td>
</tr>
</table>

具體的 demo 後期更新 。。。。。。

table的奇妙之處 - 01