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:
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?
Using table-layout: fixed as a property for table and width: calc(100%/3); for td (assuming there are 3 td 's). With these two properties set, the table cells will be equal in size.
Using width attribute: The <td> tag has width attribute to control the width of a particular column. By assigning a numeric value to this attribute between 0 to 100 in terms of percentage(or you can use pixel format).
The HTML <td> width Attribute is used to specify the width of a table cell. If width attribute is not set then it takes default width according to content. Attribute Values: pixels: It sets the width of table in terms of pixels.
The width of the columns i.e. td in a table can be fixed very easily. This can be done by adding the width attribute in the <td> tag. If the width is not specified, the width of the column changes according to the change in the content. The specifications of width for the columns can be in pixels, or percentage.
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>
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With