把一個div放在一個表格單元格的開頭

Question

我無法嘗試在表格單元格的頂部放置一個樣式爲catalog的div。我不知道爲什麼，因爲在下一欄中，我有一個div，它出現在正確的位置。

我在做什麼錯？

The code, live at jsFiddle：

<table id="tblButtonContainer" style="margin:0px;border:0px; border-collapse: collapse; border-spacing: 0;"> 
<tbody> 
<tr> 
    <td style=""> 
    <div class="ui-accordion-header ui-helper-reset ui-state-default topCatalog"> 
     Categorias 
    </div> 
    </td> 
    <td> 
    <div class="ui-accordion-header ui-helper-reset ui-state-default"> 
     <label style="float:left;color:#FFF">Buscar</label> 
     <input id="txtFinder" class="txtInput" type="text" value="Buscar" size="40"> 
     <input id="btnFinder" type="button" value="Buscar" class="ui-button ui-widget ui-state-default ui-corner-all" role="button"> 
    </div> 
    </td> 
</tr> 
<tr> 
    <td style="padding-right: 20px"> 
    <div class="catalog ui-accordion-header ui-helper-reset ui-state-default" style="200px"> 
     <ul class="menuCat"> 
     <li> 
      <label class="formatText">Accesorios 4x4</label> 
      <span class="ui-icon ui-icon-triangle-1-e" style="float:right"></span> 
     </li> 
     <li> 
      <label class="formatText">Frenos y Pastillas</label> 
      <span class="ui-icon ui-icon-triangle-1-e" style="float:right"></span> 
     </li> 
     <li> 
      <label class="formatText">Tren Delantero</label> 
      <span class="ui-icon ui-icon-triangle-1-e" style="float:right"></span> 
     </li> 
     </ul> 
    </div> 
    </td> 
    <td> 
    <div id="catalogSearch" class="boxShadow"> 
     <table id="tblCatalogSearch" class="centerTable" style="text-align:center"> 
     <tbody> 
     <tr> 
     <td colspan="3"> 
      <div style="margin:0;width:490px" class="ui-state-hover borders"> 
      Elige el modelo de tu vehículo 
      </div> 
      <div style="height:20px"></div> 
     </td> 
     </tr> 
     <tr> 
     <td> 
      <label>Marca</label> 
      <select name="brand" id="brand"> 
      <option value="0">Elige una Marca</option> 
      <option value="1">prueba</option> 
      </select> 
     </td> 
     <td> 
      <label>Modelo</label> 
      <select name="model" id="model" disabled="disabled"></select> 
     </td> 
     <td> 
      <label>Año</label> 
      <select name="year" id="year" disabled="disabled"></select> 
     </td> 
     </tr> 
     <tr><td><div style="height:20px"></div></td></tr> 
     <tr> 
     <td colspan="3"> 
      <input name="btnSearch" id="btnSearch" value="Buscar" type="button" class="ui-button ui-widget ui-state-default ui-corner-all" role="button"> 
     </td> 
     </tr> 
     </tbody> 
     </table> 
    </div> 
    <div id="results" class="boxShadow ui-corner-all borders" style="display: none; "> 
     <div style="margin:0;width:490px" class="ui-state-hover borders"> 
     <span class="formatText" style="color:#373737;font-weight:bold;margin-left:20px"> 
      Resultados de la Busqueda: 
     </span> 
     </div> 
     <table id="tblResult"> 
     <tbody> 
     <tr></tr> 
     <tr><td>Uno</td></tr> 
     <tr><td>dos</td></tr> 
     </tbody> 
     </table> 
    </div> 
    </td> 
</tr> 
</tbody> 
</table> 

注：我使用jQuery UI的幫助我的風格，我不知道這是否是問題的一部分。

Answer 1

使用：#tblButtonContainer td {vertical-align: top;}。

Don't use inline styles！

你也可以考慮增加：

#tblButtonContainer td div { 
    display: table; 
    height: 100%; 
    width: 100%; 
} 

但我不能保證在所有瀏覽器。

Answer 2

只需將vertical-align:top;添加到您的手機。

默認的表格單元行爲是垂直對齊中心。第二個單元格看起來正確，因爲它填滿了整個單元格。但它在技術上並不符合頂級要求。