テーブル行の下のブートストラップアラインメントのエラーメッセージ

Question

エラーメッセージが出てきたら、Bテキスト入力と同じ行をAテキスト入力とする方法を教えてください。

コード：

<table id="facilityTbl" class="col-md-12"> 
 
<tr> 
 
\t <td>A</td> 
 
\t <td>B</td> 
 
</tr> 
 
     <tr> 
 
     <td><input type='text'></td> 
 
     <td><input type='text'><p>error-message</p></td> 
 
     </tr> 
 
     <tr> 
 
     <td><input type='text'></td> 
 
     <td><input type='text'></td> 
 
     </tr> 
 
     <tr> 
 
     <td><input type='text'></td> 
 
     <td><input type='text'></td> 
 
     </tr> 
 
</table>

Answer 1

あなたは以下のスニペットを確認し、このためvertical-alignを使用することができます。

td { 
 
    vertical-align: top; 
 
} 
 
p { 
 
    margin: 0px; 
 
}

\t <table id="facilityTbl" class="col-md-12"> 
 
\t \t <tr> 
 
\t \t \t <td>A</td> 
 
\t \t \t <td>B</td> 
 
\t \t </tr> 
 
\t \t <tr> 
 
\t \t \t <td><input type='text'></td> 
 
\t \t \t <td><input type='text'><p>error-message</p></td> 
 
\t \t </tr> 
 
\t \t <tr> 
 
\t \t \t <td><input type='text'></td> 
 
\t \t \t <td><input type='text'></td> 
 
\t \t </tr> 
 
\t \t <tr> 
 
\t \t \t <td><input type='text'></td> 
 
\t \t \t <td><input type='text'></td> 
 
\t \t </tr> 
 
\t </table>

Answer 2

をあなたはテーブルを使用しているので、テーブル内のコントロールを移動します。

しかし、このように私は、違っそれを行っているでしょう：

<input type='text' class="error" placeholder="error-message here"> 

ワーキングデモ

.error{ 
 
\t border:solid 1px red; 
 
} 
 
::-webkit-input-placeholder { /* Chrome/Opera/Safari */ 
 
    color: #ff8383; 
 
} 
 
::-moz-placeholder { /* Firefox 19+ */ 
 
    color: #ff8383; 
 
}

<table id="facilityTbl" class="col-md-12"> 
 
    <tr> 
 
    <td>A</td> 
 
    <td>B</td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input type='text'> 
 
    </td> 
 
    <td> 
 
     <input type='text' class="error" placeholder="error-message here"> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input type='text'> 
 
    </td> 
 
    <td> 
 
     <input type='text'> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input type='text'> 
 
    </td> 
 
    <td> 
 
     <input type='text'> 
 
    </td> 
 
    </tr> 
 
</table>