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的截图：

width is 154px for all td elements

修改和进一步信息

从@ daker的评论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元素跟随td的宽度，这是有意义的。

然而，描述跨越2列colspan="2"，其中包含第一个带有无线电的td和带有文本描述数据绑定的第二个td。

有没有办法让the colspan = 2在thead中，但是在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>

Answer 2

16px + 40％+ 25％+ 25％不是100％。你不能用这种方式混合px和％，表渲染算法不能满足这样的条件......

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

你也可以采用更简单的方式：

使用3列（50％，25％，25％），删除colspan，并加入2个第一列的内容（都是内联元素）：

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

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

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

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

4 个答案: