製作<div></div>漂浮在表tr和td

Question

我已經做了一些編碼，我可以在php頁面上自動完成。但不幸的是，當我輸入的東西到文本框中，它確實表明我需要什麼，但是表被越來越怪異時，會顯示它：

Weird Table

我想使（用CSS定製）浮動，像這樣的：

Correct element I wanted

任何人可以幫助我嗎？我不是在CSS相當不錯的，所以這裏的代碼：

#material-list { 
 
    position: relative; 
 
    float: left; 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 190px; 
 
} 
 
#material-list li { 
 
    padding: 10px; 
 
    background: #FAFAFA; 
 
    border-bottom: #F0F0F0 1px solid; 
 
} 
 
#material-list li:hover { 
 
    background: #F0F0F0; 
 
} 
 
#search-box { 
 
    padding: 10px; 
 
    border: #F0F0F0 1px solid; 
 
}

<table> 
 
    <tr> 
 
    <td bgcolor="#8eb4e3" class="td-data_1"><font size="2dp"><strong>Material Code</strong></font> 
 
    </td> 
 
    <td class="td-data_1"> 
 
     <div class="frmSearch"> 
 
     <input type="text" id="material_code" placeholder="Enter Material Name" style="font-size:13px; width: 215 " /> 
 
     <div id="suggesstion-box"></div> 
 
     </div> 
 
    </td> 
 
    </tr> 
 
</table>

Answer 1

設置#suggestion-box在absoluteposition，所以它不會在頁面

#material-list { 
 
    position: relative; 
 
    float: left; 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 190px; 
 
} 
 
#material-list li { 
 
    padding: 10px; 
 
    background: #FAFAFA; 
 
    border-bottom: #F0F0F0 1px solid; 
 
} 
 
#material-list li:hover { 
 
    background: #F0F0F0; 
 
} 
 
#search-box { 
 
    padding: 10px; 
 
    border: #F0F0F0 1px solid; 
 
} 
 
#suggesstion-box {position:absolute;

<table> 
 
    <tr> 
 
    <td bgcolor="#8eb4e3" class="td-data_1"><font size="2dp"><strong>Material Code</strong></font> 
 
    </td> 
 
    <td class="td-data_1"> 
 
     <div class="frmSearch"> 
 
     <input type="text" id="material_code" placeholder="Enter Material Name" style="font-size:13px; width: 215 " /> 
 
     <div id="suggesstion-box">whatever<br/>whatever </div> 
 
     </div> 
 
    </td> 
 
    </tr> 
 
</table>

流內的互動