「標準テーブル」のクラスを持つテーブルがあります。入力ボックス、選択、またはテキストエリアを別の要素と組み合わせてセルに配置すると、 が存在しない場合でも、2 つの別々の行に表示され
ます。
クラスの CSS は次のとおりです。
/* Table
====================================*/
table.standard-table {
width:100%;
border-collapse: separate;
border-spacing: 0;
border:none;
margin-bottom: 15px;
-webkit-box-shadow: 0px 1px 1px 0px rgba(180, 180, 180, 0.1);
box-shadow: 0px 1px 1px 0px rgba(180, 180, 180, 0.1);
border:1px solid #cccccc;
}
table.standard-table th {
border: 1px solid #dddddd;
border-right: none;
background-color: #fafafa;
text-align: left;
padding: 10px 15px;
color: #404040;
vertical-align: top;
font-size: 14px;
font-weight: bold;
}
table.standard-table td:last-child {
border-right: 1px solid #ddd;
}
table.standard-table th:last-child {
border-right: 1px solid #ddd;
}
table.standard-table td {
padding: 10px 15px;
border: #e0e0e0 1px solid;
border-top: none;
border-right: none;
}
table.standard-table tr:hover td {background-color: #fafafa;}
table tr.altrow { background-color: #cccccc; }
table th {text-align: left; font-weight:bold; vertical-align:top; }
問題のある行の例を次に示します。
<tr>
<th valign='top'>Items in Package</th>
<td>
<input type='checkbox' name='categories[]' value='test' /> Test
<input type='text' name='budget_1' placeholder='Budget' style='width:200px;' onkeyup=\"if (/[a-z\s,$]/ig.test(this.value)) this.value = this.value.replace(/[a-z\s,$]/ig,'')\" />
</td>
</tr>
「display:inline」、「display:inline-cell」、「display:inline-table」、およびその他すべてを追加しようとしましたが、チェックボックス、テキスト、および入力ボックスを同じ行に配置するものはありません。