Question

我无法尝试将样式catalog的div放在表格单元格的顶部。我不知道为什么，因为在下一栏中，我有一个div，它出现在正确的位置。

我做错了什么？

<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

只需将vertical-align:top;添加到您的手机中。

默认表格单元格行为是垂直对齐中心。第二个细胞对你来说是正确的，因为它填满整个细胞。但它在技术上根本不符合顶部。

Answer 2

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

Don't use inline styles！

您还可以考虑添加：

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

但我无法在所有浏览器中保证这一点。

将div放在表格单元格的开头

2 个答案: