3

私は twitter-bootstrap を使用しており、次のような 2 つのテーブルがあります: http://jsfiddle.net/MELUd/

<table class="table table-bordered">
    <thead>
        <tr>
            <td colspan="2"><input type="text" ></td>
            <td colspan="2"><input type="text" ></td>
            <td colspan="2"><input type="text" ></td>
            <td colspan="2"><input type="text" ></td>
            <td colspan="2"><input type="text" ></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td >XS</td>
            <td >XS</td>
            <td >XS</td>
            <td >XS</td>
            <td >XS</td>
            <td >XS</td>
            <td >XS</td>
            <td >XS</td>
            <td >XS</td>
            <td >XS</td>
        </tr>
    </tbody>
</table>

最初のテーブルのテキスト入力はサイズ変更されないため、テーブルは応答しません。しかし、2 番目のテーブルの例では、単純なテキストで完全に機能します。

水平スクロールバーが表示されないように、入力テキストを動的な幅で作成するにはどうすればよいですか?

ヘルプ、ヒント、アドバイスをいただければ幸いです。さらに情報が必要な場合はお知らせください。投稿を編集します。

4

2 に答える 2

5

それを行う方法は、JavaScriptを使用して幅を動的に変更することだと思います。

$(document).ready(function(){
    $('input').each(function(){
        $(this).width($(this).parent().width()-20);
    });
});

フィドルをチェックしてください

入力が中央に配置されるように、それに応じてパディングとマージンを調整してください。

別の解決策は、入力をブロックとして表示することです

.table input{
    display:block;
    width:80%;
    margin-left:auto;
    margin-right:auto;
}

フィドルをチェックしてください

于 2013-06-04T09:55:32.133 に答える
0

テキストボックスの最大幅を px または em で指定してみてください。

input[type='text']{max-width:4em}

私は彼らと一緒に行くと思います。

于 2013-06-04T09:38:07.600 に答える