css - TD 内的 radio ，无法设置宽度 - 所有 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 宽，每一行都是相等的。

不用担心数据绑定(bind)属性，我使用的是 knockoutjs。我正在使用 bootstrap 进行 STLying，但看不到任何从 bootstrap CSS 应用的列宽。

我在下面截取了 chrome 的屏幕截图:

编辑和更多信息

在查看@daker 的评论中的 fiddle 后 http://jsfiddle.net/g18c/Lnvny/ ，我可以看到宽度应用正常。

检查我的代码时，我有一个导致问题的 thead 部分，这在上面的 fiddle 中不存在。

添加以下 thead fiddle 部分阻止宽度应用于 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 个元素的宽度设置为 <th colspan="2" style="width:20px">Description</th>它的大小，所以 td 元素跟随 td 的宽度，这是有道理的。

然而，描述跨越 2 列 colspan="2"其中包括第一个 td带 radio ，第二个td在 tbody 中使用文本描述数据绑定(bind)。

有什么方法可以在 thead 中保留 th colspan=2，同时在 tbody 中设置单选按钮的宽度 td=16px？

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>