TD 内的 Radio，无法设置宽度 - 所有 TD 元素都等宽并忽略宽度样式答案

【问题标题】：Radio inside TD, unable to set width - all TD elements equal width and ignoring width styleTD 内的 Radio，无法设置宽度 - 所有 TD 元素都等宽并忽略宽度样式
【发布时间】：2013-12-30 13:42:27
【问题描述】：

我有一个表格，在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。我正在使用引导程序进行设置，但看不到引导程序 CSS 应用的任何列宽。

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

编辑和更多信息

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

查看我的代码时，我有一个导致问题的标题部分，这在上面的小提琴中不存在。

将下面的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 元素的宽度设置为 <th colspan="2" style="width:20px">Description</th> 它的大小，那么 td 元素将遵循 td 的宽度，这是有道理的。

但是，描述跨越两列，colspan="2" 包括第一个带有无线电的td，第二个td 和 tbody 中的文本描述数据绑定。

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

【问题讨论】：

您想将 with 设置为 <td> 还是收音机？
请解释什么不适用于此：jsfiddle.net/Lnvny
真正的你的作品......我的没有。相同的代码。一定是css的问题让我深入研究一下
@daker 感谢您的回复 - 这与我在您的小提琴上更新的thead 部分有关，在我原来的问题上发布的编辑

标签： css html

【解决方案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>

【讨论】：

【解决方案2】：

16px+40%+25%+25% 不是 100%。不能这样混合px和%，表格渲染算法不能满足这样的条件……

正如 mali303 所说，您可以将第二个 td 设置为 auto，甚至更简单：不要设置它的宽度。最后两列将是 25% 宽度，前 16px 宽度和所有剩余空间将用于第二列（第 1 td + 2nd td 将是 50%）

你也可以走更简单的方法：

使用 3 列（50%、25%、25%），删除 th 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】：

在您的 <thead> 部分中添加一个空的 <th></th>：

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

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

【讨论】：