table的奇妙之处 - 01

Posted 2020-09-25 LikWin

在很多场合，你会发现，当你需要模拟  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 后期更新 。。。。。。