Radio inside TD, unable to set width - all TD elements equal width and ignoring width style

Question

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

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.

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.

I have take a screenshot of chrome below:

width is 154px for all td elements

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.

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

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

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.

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?

Explain what doesn't work with this please: jsfiddle.net/Lnvny — daker
– daker, Commented Dec 12, 2013 at 8:44
True yours works... mine doesn't. Same code. Must be a problem in css somewhere let me dig in and take a even closer look — morleyc
– morleyc, Commented Dec 12, 2013 at 9:28
@daker thanks for the reply - it is to do with the thead section which i have updated on your fiddle, edits posted on my original question — morleyc
– morleyc, Commented Dec 13, 2013 at 8:55

mali303 · Accepted Answer · 2013-12-17 06:59:01Z

set width for second column as 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>

miguel-svq · Accepted Answer · 2013-12-20 12:09:40Z

3

16px+40%+25%+25% is not 100%. You can't mix px and % this way, the table rendering algorithm can't satisfy such conditions...

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

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

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

edited Dec 20, 2013 at 12:09

answered Dec 20, 2013 at 10:54

miguel-svq

2,17610 silver badges11 bronze badges

Comments

Rustam · Accepted Answer · 2013-12-14 08:35:45Z

2

<td style="width:1px"><div style="width:16px"><input type="radio" data-bind=" attr: { name: $parent.name }, checkedValue: $data, checked: $parent.selection" /></div></td>

answered Dec 14, 2013 at 8:35

Rustam

1,9432 gold badges16 silver badges35 bronze badges

Comments

digijim · Accepted Answer · 2013-12-17 22:32:50Z

2

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>

answered Dec 17, 2013 at 22:32

digijim

6862 gold badges10 silver badges20 bronze badges

Collectives™ on Stack Overflow

Radio inside TD, unable to set width - all TD elements equal width and ignoring width style

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related