HTMLテーブルの要素のフォーマット

Question

これは本当に些細なようですが、私は意図したものを達成することができません。私はツールボックス（部門内のテーブル）に新しい要素を追加しようとしています。しかし、新たに追加された要素は整列していません。

Pass-throughとWindow queryは、次のように重複しています。

HTMLの表他の要素、単純なクエリ、ウィンドウのクエリのためのパススルー

のクラスの

<div style="float: left;" class="toolbox" id="toolbox"> 
    <table> 
    ... 
    <tr> 
     <td> 
      <label class="col-md-4 control-label">Simple Query</label> 
     </td> 
     <td> 
      <div class="squery" id="rId"></div> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <label class="col-md-4 control-label">Pass-through</label> 
     </td> 
     <td> 
      <div class="nElem" id="lId"></div> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <label class="col-md-4 control-label">Window Query</label> 
     </td> 
     <td> 
      <div class="wquery" id="wId"></div> 
     </td> 
    </tr> 
    ... 

CSSクラスnElemは、すべて同じですパススルーのクラス。唯一の違いは色です。

.nElem { 
    border: 1px solid #346789; 
    box-shadow: 2px 2px 19px #aaa; 
    -o-box-shadow: 2px 2px 19px #aaa; 
    -webkit-box-shadow: 2px 2px 19px #aaa; 
    -moz-box-shadow: 2px 2px 19px #aaa; 
    -moz-border-radius: 0.5em; 
    border-radius: 0.5em; 
    opacity: 0.8; 
    width: 120px; 
    height: 72px; 
    line-height: 80px; 
    cursor: pointer; 
    text-align: center; 
    z-index: 20; 
    position: absolute; 
    background-color: darkslateblue; 
    color: black; 
    font-family: helvetica, sans-serif; 
    padding: 0.5em; 
    font-size: 0.9em; 
    -webkit-transition: -webkit-box-shadow 0.15s ease-in; 
    -moz-transition: -moz-box-shadow 0.15s ease-in; 
    -o-transition: -o-box-shadow 0.15s ease-in; 
    transition: box-shadow 0.15s ease-in; 
} 

（テーブルが作成され、その中課）ツールボックスクラス

.toolbox { 
    margin: 0 auto; 
    margin-left: 10px; 
    width: 230px; 
    height:850px; 
    padding: 20px; 
    font-family: "Helvetica"; 
    font-size: small; 
    background: #f4f4f4; 
    border-radius: 3px; 
    -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3); 
    box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3); 
} 

Answer 1

あなたのコードは正確に間違っているかを理解するのに十分ではありません。しかし、主な問題は、.nElem、.squery、.wqueryなどのためにposition: absolute;によって引き起こされると確信しています。したがって、このプロパティを削除して再度見てください。 は、私がここにあなたの問題を解決しようとした：http://codepen.io/g1un/pen/ozZNkL

.nElem { 
    /*position: absolute;*/ 
}