Радио внутри TD, неспособное установить ширину - все элементы TD равны ширине и игнорируют стиль ширины

Question

У меня есть таблица с переключателем на элементе td, однако мне не удается установить ширину (моя страница находится в HTML5, поэтому используя атрибут style css для установки ширины).

Моя строка выглядит следующим образом:

<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> 

На самом деле все строки являются 154px в ширину, каждая строка равна.

Не беспокойтесь о атрибутах привязки данных, я использую knockoutjs. Я использую bootstrap для строгих, но не вижу никаких ширины столбцов, применяемых к бутстрапу CSS.

У меня есть сделать скриншот хрома ниже:

Edit и дополнительной информации

Посмотрев на скрипке от комментария @ Дакер здесь http://jsfiddle.net/g18c/Lnvny/, я мог видеть, ширина была применяется ОК.

При переходе по моему коду у меня есть раздел thead, который вызывает проблему, этого нет в приведенной выше скрипте.

Добавление ниже thead раздел на скрипке останавливает ширину от применения на td элемента, updated here http://jsfiddle.net/g18c/Lnvny/2/

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

Если я установить ширину в го элемента с <th colspan="2" style="width:20px">Description</th> его размеров, так что ТД элементы следующие ширина td, что имеет смысл.

Однако описание охватывает через 2 колонки с colspan="2", которая включает в себя как первый td с радио, и второй td с описанием текстовых данных-привязки в TBODY.

Есть ли способ сохранить th colspan = 2 в thead, но установить ширину переключателя td = 16px в tbody? ширина

Answer 1

набор для второй колонки как авто:

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

Добавить пустой <th></th> в вашем <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% не на 100%. Вы не можете смешивать px и% таким образом, алгоритм рендеринга таблицы не может удовлетворить такие условия ...

Как сказал mali303, вы можете установить второй td в auto или даже проще: не устанавливайте его ширину. Последние два столбца будут иметь ширину 25%, первую ширину 16 пикселей и все оставшееся пространство пойдет для второго столбца (и 1-й тд + 2-й тд будет 50%)

Вы также можете пойти более простым способом:

Используйте 3 колонки (50%, 25%, 25%), удалить й Colspan и присоединиться содержание ваших 2 первых столбцов (оба встроенные элементы):

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