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

I have a table that has a radio button in on td element, however i am unable to set the width (my page is in HTML5 so using the style css attribute to set the width).

我有一个在td元素上有一个单选按钮的表,但是我无法设置宽度(我的页面在HTML5中,因此使用样式css属性来设置宽度)。

My row is as follows:

我的行如下:

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

In fact all of the rows are 154px wide, each row is equal.

事实上,所有行都是154px宽,每行相等。

Don't worry about the data-bind attributes, i am using knockoutjs. I am using bootstrap for the stlying, but cant see any column widths applied fron the bootstrap CSS.

不要担心数据绑定属性,我正在使用knockoutjs。我使用bootstrap进行stlying,但是看不到任何列宽度应用于bootstrap CSS。

I have take a screenshot of chrome below:

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

Edit and further info

编辑和进一步的信息

After looking at the fiddle from @daker's comment here http://jsfiddle.net/g18c/Lnvny/, i could see the width was applied OK.

在看了@ daker评论这里的小提琴http://jsfiddle.net/g18c/Lnvny/之后,我可以看到宽度应用了。

When going over my code, i have a thead section which is causing the issue, this is not present in the above fiddle.

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

Adding the below thead section to the fiddle stops the widths from applying on the td element, updated here http://jsfiddle.net/g18c/Lnvny/2/

将下面的thead部分添加到小提琴会停止应用td元素的宽度,在此处更新http://jsfiddle.net/g18c/Lnvny/2/

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

If i set the width in the th element with <th colspan="2" style="width:20px">Description</th> it sizes, so the td elements are following the width of the td, which makes sense.

如果我用描述 设置第th个元素的宽度,那么td元素跟随td的宽度,这是有道理的。

However the description spans across 2 columns with colspan="2" which consists of both the first td with radio, and second td with the text description data-bind in the tbody.

然而,描述跨越2列,其中colspan =“2”,其包括带有无线电的第一个td和带有文本描述data-bind的第二个td。

Is there any way to keep the th colspan=2 in the thead, yet set the width of the radio button td=16px in tbody?

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

4 个解决方案

#1

set width for second column as auto:

将第二列的宽度设置为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% is not 100%. You can't mix px and % this way, the table rendering algorithm can't satisfy such conditions...

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

As mali303 said, you could set the second td to auto, or even simpler: Don't set its width. The last two colums will be 25% width, the first 16px width and all the remaining space will go for the second column (and 1st td + 2nd td will be 50%)

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

You could also go the simpler way:

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

Use 3 columns (50%,25%,25%), remove th colspan, and join the content of your 2 first columns (both are inline elements):

使用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

Add an empty <th></th> in your <thead> section:

在部分添加一个空 :

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

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