Mantenere caselle di controllo nella tabella HTML algined

Question

consideri un semplice centrato tavolo allineati, con alcune caselle di controllo

clic su un pulsante verrà automaticamente selezionare alcune caselle di controllo e aggiungere un po 'di testo dinamico accanto al caselle di controllo. Ora le caselle di controllo non sono più allineate e la tabella sembra strana.

$('#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/

in HTML pianura questo può essere risolto con l'aggiunta di colonna in più ....

Ma prega di considerare che ho semplificato il campione e non posso aggiungere colonna: (

Sto cercando la soluzione di css, o può essere un suggerimento che può essere utilizzato.Anche come ho l'ID di caselle di controllo, potrei aggiungere qualsiasi DOM HTML che può aiutare a correggere l'allineamento.

Answer 1

come chiesto il PO per soluzione semplice CSS

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

Demo

Answer 2

qui si va: http://jsfiddle.net/m9884jy7/2/

prima cosa da fare, è quello di aggiungere un arco nei pressi di ogni casella di controllo, si ha - quindi aggiungere una vuota vicino all'automobile:

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

e quindi aggiungere questo css, per impostare una larghezza di default per un arco:

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

Answer 3

Ok dopo aver investito qualche pensiero ad esso ho capito una soluzione, in pratica si avrebbe un involucro con la posizione relativa allora l'arco otterrebbe assoluta p ositioning .. piuttosto semplice in realtà, ecco il codice: 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>

E 'flessibile ma l'unico inconveniente è che se la lunghezza del testo è più grande del contenitore, il ritorno a capo può verificarsi

Answer 4

visto che si sta utilizzando jQuery in ogni caso, provate questo:

$('#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>

Inizialmente non utilizza una larghezza definita, ma jQuery ne calcola uno. Sfortunatamente con il mio metodo dovrai aggiungere uno span a tutti gli oggetti: indipendentemente se selezionato o meno. Avrai notato che ho rimosso anche l'attributo border:1. È deprecato per HTML5, quindi puoi usare anche i CSS.