Подтвердить что ты не робот

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

У меня есть таблица с переключателем в элементе 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>

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

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

Ниже снимок экрана:

width is 154px for all td elements

Изменить и получить дополнительную информацию

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

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

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

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

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

Однако описание охватывает 2 столбца с colspan="2", который состоит из первого td с радио и второго td с привязкой данных описания текста в тексте.

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

4b9b3361

Ответ 1

установить ширину для второго столбца как 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>

Ответ 2

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>

Ответ 3

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

Ответ 4

Добавьте пустой <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>