0

「標準テーブル」のクラスを持つテーブルがあります。入力ボックス、選択、またはテキストエリアを別の要素と組み合わせてセルに配置すると、 が存在しない場合でも、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」、およびその他すべてを追加しようとしましたが、チェックボックス、テキスト、および入力ボックスを同じ行に配置するものはありません。

4

2 に答える 2

0

使用できますvertical-align

http://jsfiddle.net/2RL8t/3/

技術的にはすでに垂直方向の中央に配置されていますが、視覚的にはそうではないと思います。

于 2012-08-22T13:46:06.780 に答える
0

試す;

float: left;

これにより、要素がインライン化されます。これに加えて、次を使用します。

table-layout: fixed;
于 2012-08-22T13:26:50.940 に答える