Radio all'interno di TD, impossibile impostare la larghezza - tutti gli elementi TD sono uguali alla larghezza e ignorano lo stile di larghezza

Question

Ho una tabella con un pulsante di opzione sull'elemento td, tuttavia non sono in grado di impostare la larghezza (la mia pagina è in HTML5 usando l'attributo css di stile per impostare la larghezza).

mio riga è come segue:

<h3><span data-bind="text: description"></span></h3> 
<table class="table table-striped table-condensed"> 
    <thead> 
     <tr> 
      <th colspan="2">Description</th> 
      <th>Setup</th> 
      <th>Monthly</th> 
     </tr> 
    </thead> 
    <tbody> 
     <!-- ko foreach: options --> 
      <tr> 
       <td style="width:16px"><input type="radio" data-bind=" attr: { name: $parent.name }, checkedValue: $data, checked: $parent.selection" /></td> 
       <td><span data-bind="text: description"></span></td> 
       <td><span data-bind="text: setup == 0 ? '-' : setup"></span></td> 
       <td><span data-bind="text: price == 0 ? '-' : price"></span></td> 
      </tr> 
     <!-- /ko --> 
    </tbody> 
</table> 

Infatti tutte le righe sono 154px di larghezza, ciascuna riga è uguale.

Non preoccuparti degli attributi di associazione dati, sto utilizzando knockoutjs. Sto usando bootstrap per l'arresto, ma non vedo alcuna larghezza di colonna applicata dal CSS di bootstrap.

devo prendere uno screenshot di Chrome di seguito:

Modifica e ulteriori informazioni

Dopo aver guardato il violino dal commento di @ Daker qui http://jsfiddle.net/g18c/Lnvny/, ho potuto vedere la larghezza era applicato OK.

Quando si passa il mio codice, ho una sezione thead che sta causando il problema, questo non è presente nel violino di cui sopra.

Aggiunta del thead sezione per il violino termina le larghezze applicazione sull'elemento td, updated here http://jsfiddle.net/g18c/Lnvny/2/

<thead> 
    <tr> 
     <th colspan="2">Description</th> 
     <th>Setup</th> 
     <th>Monthly</th> 
    </tr> 
</thead> 

Se i impostare la larghezza nell'elemento esimo con <th colspan="2" style="width:20px">Description</th> essa dimensioni, così gli elementi td stanno seguendo la larghezza del td, che ha senso.

Tuttavia la descrizione si estende su 2 colonne con colspan="2" che consiste sia il primo td con radio, e secondo td con la descrizione data-bind nel tbody.

C'è un modo per mantenere il colspan = 2 nel thead, ma impostare la larghezza del pulsante di opzione td = 16px in tbody? larghezza

Answer 1

set per seconda colonna come auto:

http://jsfiddle.net/Lnvny/46/

<h3><span data-bind="text: description"></span></h3> 
<table class="table table-striped table-condensed"> 
    <thead> 
     <tr> 
      <th colspan="2">Description</th> 
      <th>Setup</th> 
      <th>Monthly</th> 
     </tr> 
    </thead> 
    <tbody> 
     <!-- ko foreach: options --> 
      <tr> 
       <td style="width: 15px;"><input type="radio" data-bind=" attr: { name: $parent.name }, checkedValue: $data, checked: $parent.selection" /></td> 
       <td style="width: auto;">text<span data-bind="text: description"></span></td> 
       <td style="width: 25%;"><span data-bind="text: setup == 0 ? '-' : setup"></span></td> 
       <td style="width: 25%;"><span data-bind="text: price == 0 ? '-' : price"></span></td> 
      </tr> 
     <!-- /ko --> 
    </tbody> 
</table> 

Answer 2

<td style="width:1px"><div style="width:16px"><input type="radio" data-bind=" attr: { name: $parent.name }, checkedValue: $data, checked: $parent.selection" /></div></td> 

Answer 3

Aggiungi un vuoto <th></th> nella vostra sezione <thead>:

http://jsfiddle.net/Lnvny/48/

<table> 
<thead> 
    <tr> 
     <th colspan="2">Description</th> 
     <th>Setup</th> 
     <th>Monthly</th> 
     <th></th> 
    </tr> 
</thead> 

Answer 4

16px + 40% + 25% + 25% al ​​100%. Non è possibile mischiare px e% in questo modo, l'algoritmo di rendering della tabella non può soddisfare tali condizioni ...

Come detto mali303, è possibile impostare il secondo td su automatico o anche più semplice: non impostare la larghezza. Le ultime due colonne avranno una larghezza del 25%, la prima di 16 px di larghezza e tutto lo spazio rimanente per la seconda colonna (e la prima td + 2 ° td sarà il 50%)

Si potrebbe anche fare il modo più semplice:

Usa 3 colonne (50%, 25%, 25%), rimuovere ° colspan, e unirsi al contenuto delle prime 2 colonne (entrambi sono elementi inline):

<td style="width: 50%;"> 
<input type="radio" data-bind="..." /> 
<span data-bind="text: description"></span> 
</td>