How do I wrap several buttons inside a TD element - html

Question

I'm trying to alter this collection of buttons to wrap at the right edge of the screen. Currently they do not respect the right border of the screen and they just continue off the edge (well they aren't visible anyway).
How do I force these buttons to automatically wrap to a new line within the table? The screen is re-sizable so I can't just set them statically.
Thanks.
<td>
<table class="clsActionTable">
<tr>
<td style="text-align:center;">
<button class="clsActionButton" id="idAddButton" onclick="idAddButton_onclick();">Add</button>
<button class="clsActionButton" id="idEditButton" onclick="idEditButton_onclick();">Edit</button>
<button class="clsActionButton" id="idDeleteButton" onclick="idDeleteButton_onclick();">Delete</button>
<button class="clsActionButton" id="idManageRowButton" onclick="idManageRowButton_onclick();">Add Row</button>
</td>
</tr>
</table>
and the CSS...
.clsActionTable
{
width: 100%;
color: white;
font-size: smaller;
}
.clsActionButton
{
width: 128px;
}
#idActionPlane
{
left: 0px;
bottom: 0px;
width:100%;
background-color: #4E5A81;
color: White;
}

Answer 1

The reason you are not seeing it wrap in IE9 is because your original code http://jsfiddle.net/VdBGe/ automatically drops into compatibility mode. If you un-check it and put it back to standards mode you will see it wrap. It wraps for IE8+9 but not IE7.
To make it wrap in IE7 using your original code, you need to wrap the buttons in a div and set width:100%. Live Example: http://jsfiddle.net/VdBGe/1/
HTML:
<td style="text-align:center;">
<div id="btnwrap">
<button class="clsActionButton" id="idAddButton" onclick="idAddButton_onclick();">Add</button>
<button class="clsActionButton" id="idEditButton" onclick="idEditButton_onclick();">Edit</button>
<button class="clsActionButton" id="idDeleteButton" onclick="idDeleteButton_onclick();">Delete</button>
<button class="clsActionButton" id="idManageRowButton" onclick="idManageRowButton_onclick();">Add Row</button>
</div>
</td>
CSS:
#btnwrap{
width: 100%;
}

Answer 2

<table class="clsActionTable">
<tr>
<td style="text-align:center;">
<button class="clsActionButton moveright" id="idAddButton" onclick="idAddButton_onclick();">Add</button>
<button class="clsActionButton moveright" id="idEditButton" onclick="idEditButton_onclick();">Edit</button>
<button class="clsActionButton moveright" id="idDeleteButton" onclick="idDeleteButton_onclick();">Delete</button>
<button class="clsActionButton moveright" id="idManageRowButton" onclick="idManageRowButton_onclick();">Add Row</button>
</td>
</tr>
</table>
and the css
.moveright {
float: right;
}
.clearfix:after {
content:"\0020";
display:block;
height:0;
clear:both;
visibility:hidden;
overflow:hidden;
}
.clearfix{display:block;}

Answer 3

Assuming these buttons are floating & display block. I recommend the following.
you remove text-align:center from the <td>
remove both float and display: block from the buttons(If they have these properties)
To align them right, just give the text align-right
Hope this makes sense