テーブルセルの先頭に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;を追加してください。

デフォルトの表のセルの振る舞いは、中央に垂直に配置することです。 2番目のセルは、セル全体を埋めるため、正しく表示されます。しかし、技術的にはトップには一直線に並んでいません。