0

私は次のCSSを持っています:

.form td:not(:last-child) {
    padding-right: 15px;
} 

.form td:first-child {
    padding-left: 3px;
}

.form td:last-child {
    padding-right: 5px;
}

input,select {
    width: 100%;
}

私のHTMLは次のとおりです。

<table class="form">
    <tr>
        <td><input value="foo" /></td>
        <td><input value="bar" /></td>
        <td>
            <select>
                <option>nono1</option>
                <option>nono2</option>
                <option>nono3</option>
            </select>
        </td>
        <td><input value="foo2" /></td>
    </tr>
    <tr>
        <td><input value="foo2" /></td>
        <td>
            <select>
                <option>nono1</option>
                <option>nono2</option>
                <option>nono3</option>
            </select>
        </td>
        <td><input value="foobar2" /></td>
        <td><input value="foo22" /></td>
    </tr>
</table>

JSFミドルリンク

これにより、次のようなものが生成されます。 ここに画像の説明を入力

要素selectの正確なサイズにどのように適合しますか?input

ありがとう!

4

1 に答える 1