は、HTMLテーブルのチェックボックスをキープ

Question

は簡単には、いくつかのチェックボックスとボタンをクリックする

が自動的にいくつかのチェックボックスを選択し、チェックボックスに次のいくつかのダイナミックテキストを追加します、整列テーブルを中心に考えてみましょうalgined。今度は、チェックボックスがそれ以上整列されず、テーブルが奇妙に見えます。これは、余分な列を追加することによって、それを固定することができ、プレーンHTMLで

$('#add').click(function() { 
    $('#bike').attr('checked','checked').after("<span>Good Selection</span>"); 
    $('#airplean').attr('checked','checked').after("<span>Woow</span>"); 

}); 

http://jsfiddle.net/m9884jy7/1/

....

しかし、私はサンプルを単純化していると私は列を追加することはできませんことをご検討ください。 （

私はcssの解決策を探していますが、使用できるヒントであるかもしれません。また、私はチェックボックスのIDを持っているので、整列を援助できるhtml DOMを追加できます。

Answer 1

OPはあなたが `テキスト整列を持つdivの内側`入力+ span`ラップすることができ、簡単なCSSのソリューション

input[type='checkbox'] { 
    float: left; 
    margin-left: 50% 
} 
td>span { 
    float: left; 
} 

Demo

Answer 2

ここにあなたが行く：あなたがすべきhttp://jsfiddle.net/m9884jy7/2/

まず最初に、すべてのチェックボックスの近くにスパンを追加することで、あなたが持っている - ので、車の近くに空の1を追加します。

$('#car').attr('checked','checked').after("<span></span>"); 

して、これを追加CSS、スパンにデフォルトの幅を設定します：私は解決策を考え出した

td span{ 
    display: inline-block; 
    text-align: left; 
    width: 200px; 
    padding-left:3px; 
} 

Answer 3

[OK]を、それにいくつかの考えを投資した後、基本的にあなたがしてスパンが絶対Pになるだろう相対的な位置とのラッパを持っていると思いますositioning ..非常に単純では実際に、ここでのコードは次のとおりです。JSFiddle

$('#add').click(function() { 
 
    $('#bike').attr('checked', 'checked').after("<span>Good Selection</span>"); 
 
    $('#airplean').attr('checked', 'checked').after("<span>Woow</span>"); 
 
});

table, 
 
td { 
 
    text-align: center 
 
} 
 
td > div { 
 
    position: relative; 
 
} 
 
td > div > span { 
 
    position: absolute; 
 
    text-align: left; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table border="1" style="width:100%"> 
 
    <tr> 
 
    <td>Jill</td> 
 
    <td> 
 
     <div> 
 
     <input type="checkbox" id='bike'> 
 
     </div> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td>Eve</td> 
 
    <td> 
 
     <div> 
 
     <input type="checkbox" id="car"> 
 
     </div> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td>Bill</td> 
 
    <td> 
 
     <div> 
 
     <input type="checkbox" id="airplean"> 
 
     </div> 
 
    </td> 
 
    </tr> 
 
</table> 
 
<button type="button" id="add">Select Some</button>

それはしかし、唯一の欠点柔軟であることは、テキストの長さがコンテナより大きい場合、ワードラップが

を発生することがあります

Answer 4

とにかくjQueryのを使用しているとして、これを試してみる：

$('#add').click(function() { 
 
    $('#bike').attr('checked', 'checked').after("<span>Good Selection</span>"); 
 
    $('#car').after("<span></span>"); 
 
    $('#airplean').attr('checked', 'checked').after("<span>Woow  </span>"); 
 

 
    var widest = 0; 
 
    $('table').find('span').each(function() { 
 
    widest = Math.max(widest, $(this).outerWidth()); 
 
    }).width(widest); 
 
});

table { 
 
    table-layout: fixed; 
 
    border-collapse: separate; 
 
    border: 1px solid black; 
 
    width: 100%; 
 
} 
 
td { 
 
    border: 1px solid black; 
 
    text-align: center; 
 
} 
 
span { 
 
    display: inline-block; 
 
    text-align: left; 
 
    white-space: nowrap; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<table> 
 
    <tr> 
 
    <td>Jill</td> 
 
    <td> 
 
     <input type="checkbox" id='bike'> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td>Eve</td> 
 
    <td> 
 
     <input type="checkbox" id="car"> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td>Bill</td> 
 
    <td> 
 
     <input type="checkbox" id="airplean"> 
 
    </td> 
 
    </tr> 
 
</table> 
 
<button type="button" id="add">Select Some</button>

最初に定義された幅は使用されませんが、jQueryは1を計算します。残念なことに私の方法では、チェックされているかどうかにかかわらず、spanをすべてのアイテムに追加する必要があります。私はborder:1属性も削除していることにお気づきかもしれません。 HTML5では廃止予定ですので、CSSを使用することもできます。