TD内部的无线电,无法设置宽度 - 所有TD元素等于宽度并忽略宽度样式

Question

我有一个在td元素上有一个单选按钮的表,但我无法设置宽度(我的页面在HTML5中,所以使用样式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进行stlying,但是看不到任何列宽度应用于bootstrap CSS.

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

编辑和进一步的信息

在看了@ 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>尺寸设置th元素的宽度,那么td元素跟随td的宽度,这是有道理的.

然而,描述跨越2列,colspan="2"其中第一列包括第一列td和第二列,第二列包含td文本描述data-bind在tbody中.

有没有办法在thead中保持th colspan = 2,但是在tbody中设置单选按钮td = 16px的宽度？

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