Databases
StackOverflow2013
Postsdbo
PORadio inside TD, unable to set width - all TD elements equal width and ignoring width style
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PORadio inside TD, unable to set width - all TD elements equal width and ignoring width style
    text
    copied!<p>I have a table that has a radio button in on <code>td</code> element, however i am unable to set the width (my page is in HTML5 so using the style css attribute to set the width).</p> <p>My row is as follows:</p> <pre><code>&lt;h3&gt;&lt;span data-bind="text: description"&gt;&lt;/span&gt;&lt;/h3&gt; &lt;table class="table table-striped table-condensed"&gt; &lt;thead&gt; &lt;tr&gt; &lt;th colspan="2"&gt;Description&lt;/th&gt; &lt;th&gt;Setup&lt;/th&gt; &lt;th&gt;Monthly&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;!-- ko foreach: options --&gt; &lt;tr&gt; &lt;td style="width:16px"&gt;&lt;input type="radio" data-bind=" attr: { name: $parent.name }, checkedValue: $data, checked: $parent.selection" /&gt;&lt;/td&gt; &lt;td&gt;&lt;span data-bind="text: description"&gt;&lt;/span&gt;&lt;/td&gt; &lt;td&gt;&lt;span data-bind="text: setup == 0 ? '-' : setup"&gt;&lt;/span&gt;&lt;/td&gt; &lt;td&gt;&lt;span data-bind="text: price == 0 ? '-' : price"&gt;&lt;/span&gt;&lt;/td&gt; &lt;/tr&gt; &lt;!-- /ko --&gt; &lt;/tbody&gt; &lt;/table&gt; </code></pre> <p>In fact all of the rows are 154px wide, each row is equal.</p> <p>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.</p> <p>I have take a screenshot of chrome below:</p> <p><img src="https://i.stack.imgur.com/fZqfi.png" alt="width is 154px for all td elements"></p> <p><strong>Edit and further info</strong></p> <p>After looking at the fiddle from @daker's comment here <a href="http://jsfiddle.net/g18c/Lnvny/" rel="nofollow noreferrer">http://jsfiddle.net/g18c/Lnvny/</a>, i could see the width was applied OK.</p> <p>When going over my code, i have a thead section which is causing the issue, this is not present in the above fiddle.</p> <p>Adding the below <code>thead</code> section to the fiddle stops the widths from applying on the <code>td</code> element, <a href="http://jsfiddle.net/g18c/Lnvny/2/" rel="nofollow noreferrer">updated here http://jsfiddle.net/g18c/Lnvny/2/</a></p> <pre><code>&lt;thead&gt; &lt;tr&gt; &lt;th colspan="2"&gt;Description&lt;/th&gt; &lt;th&gt;Setup&lt;/th&gt; &lt;th&gt;Monthly&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; </code></pre> <p>If i set the width in the th element with <code>&lt;th colspan="2" style="width:20px"&gt;Description&lt;/th&gt;</code> it sizes, so the td elements are following the width of the td, which makes sense.</p> <p>However the description spans across 2 columns with <code>colspan="2"</code> which consists of both the first <code>td</code> with radio, and second <code>td</code> with the text description data-bind in the tbody.</p> <p><strong>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?</strong></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload