TD width not changing CSS HTML

Question

I have a table, first row 4 items (one tr, 4 td's), second row 1 item (another tr, 1 td)

I want the second row item to align center, so I want the td on the bottom row to be width 100% to fill the tr, but it is not working. Here is my current code:

<table style="width:100%;">
<tbody><tr>
<td style="padding:20px 5px 5px 5px; text-align:center;">
<div style="height:75px; width:75px; border-color:#8AAEA4; border-style:solid; border-width:2px; display: block; margin-left:auto; margin-right:auto;">
<img height="75px" width="75px" src="/images/icons/default.jpg"></div><form style="display:inline; margin:0; padding:0; " action="/dashboard/shop_window/" method="post" onsubmit="return confirm('Are you sure?');">
<input type="hidden" name="action" value="tcd.profile.delete.shop.window.item">
<input type="hidden" name="item_id" value="">
<input class="add_to_sw" style="cursor: pointer; cursor: hand; background-color:#FFF;" type="submit" value="Delete">
</form>
</td>
<td style="padding:20px 5px 5px 5px; text-align:center;">
<div style="height:75px; width:75px; border-color:#8AAEA4; border-style:solid; border-width:2px; display: block; margin-left:auto; margin-right:auto;">
<img height="75px" width="75px" src="/images/icons/default.jpg"></div><form style="display:inline; margin:0; padding:0; " action="/dashboard/shop_window/" method="post" onsubmit="return confirm('Are you sure?');">
<input type="hidden" name="action" value="tcd.profile.delete.shop.window.item">
<input type="hidden" name="item_id" value="">
<input class="add_to_sw" style="cursor: pointer; cursor: hand; background-color:#FFF;" type="submit" value="Delete">
</form>
</td>
<td style="padding:20px 5px 5px 5px; text-align:center;">
<div style="height:75px; width:75px; border-color:#8AAEA4; border-style:solid; border-width:2px; display: block; margin-left:auto; margin-right:auto;">
<img height="75px" width="75px" src="/images/icons/default.jpg"></div><form style="display:inline; margin:0; padding:0; " action="/dashboard/shop_window/" method="post" onsubmit="return confirm('Are you sure?');">
<input type="hidden" name="action" value="tcd.profile.delete.shop.window.item">
<input type="hidden" name="item_id" value="">
<input class="add_to_sw" style="cursor: pointer; cursor: hand; background-color:#FFF;" type="submit" value="Delete">
</form>
</td>

<td style="padding:20px 5px 5px 5px; text-align:center;">
<div style="height:75px; width:75px; border-color:#8AAEA4; border-style:solid; border-width:2px; display: block; margin-left:auto; margin-right:auto;">
<img height="75px" width="75px" src="/images/icons/default.jpg"></div><form style="display:inline; margin:0; padding:0; " action="/dashboard/shop_window/" method="post" onsubmit="return confirm('Are you sure?');">
<input type="hidden" name="action" value="tcd.profile.delete.shop.window.item">
<input type="hidden" name="item_id" value="">
<input class="add_to_sw" style="cursor: pointer; cursor: hand; background-color:#FFF;" type="submit" value="Delete">
</form>
</td>
</tr>
<tr>
<td style="background-color: #FF0000; width:inherit; padding:10px 5px 5px 5px; text-align:center;">
<div style="height:75px; width:75px; border-color:#8AAEA4; border-style:solid; border-width:2px; display: block; margin-left:auto; margin-right:auto;">
<img height="75px" width="75px" src="/images/icons/default.jpg"></div><form style="display:inline; margin:0; padding:0; " action="/dashboard/shop_window/" method="post" onsubmit="return confirm('Are you sure?');">
<input type="hidden" name="action" value="tcd.profile.delete.shop.window.item">
<input type="hidden" name="item_id" value="">
<input class="add_to_sw" style="cursor: pointer; cursor: hand; background-color:#FFF;" type="submit" value="Delete">
</form></td>    
</tr>
</tbody></table>

Can anyone see what I'm doing wrong?

Here is the jsfiddle: JSFIDDLE

This is not an appropriate use of tables. Yes, your data is tabular, but it should be expressed as one record per row, not one record per cell. — cimmanon
– cimmanon, Commented Mar 1, 2013 at 13:37

harpax · Accepted Answer · 2013-03-01 12:32:27Z

1

You need to add colspan="4" to that last td:

<td colspan="4" style="background-color: #FF0000; width:inherit; padding:10px 5px 5px 5px; text-align:center;">

answered Mar 1, 2013 at 12:32

harpax

6,1265 gold badges38 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

hjpotter92 · Accepted Answer · 2013-03-01 12:32:13Z

1

The easiest method will be to add colspan property/attribute to the td tag. Like this:

<td style="background-color: #FF0000; width:inherit; padding:10px 5px 5px 5px; text-align:center;" colspan="4">

Updated fiddle link.

answered Mar 1, 2013 at 12:32

hjpotter92

81.1k36 gold badges148 silver badges188 bronze badges

Comments

korogui · Accepted Answer · 2013-03-01 13:26:29Z

0

Looking at your code, colspan will only solve at a certain time. If you put another item in the second line, you'll need to use colspan="2" on the second line for two cells.

A good solution is to use div, span and css insted of table.

answered Mar 1, 2013 at 13:26

korogui

2033 silver badges9 bronze badges

Collectives™ on Stack Overflow

TD width not changing CSS HTML

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related