I am curious. Why doesn’t margin-right have any effect on the position or size of a table even one with “width:auto”?
At a guess, I would say that it’s because a table’s natural size is defined by its contents, and it won’t shrink below that (eg if it would involve breaking words), so setting a right-margin would not push the right-hand side of the table further in - it might just create some whitespace off the right-hand side of the page.
Have you got a live example of where you think it isn’t being applied correctly?
As Stevie said a table without width will fit its contents which means that a right auto margin would in effect be the distance to the containing block. In the box model the margin,width, padding and borders must add up to the available space. A right margin that is too large will extend out of the containing block while one that is too small will have no real effect.
The right margin in the following example is accepted by all browsers as shown by the gap between the red and blue borders.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#outer {
float:left;
border:2px solid red;
}
table {
margin-right:100px;
border:1px solid blue
}
</style>
</head>
<body>
<div id="outer">
<table cellspacing="0" cellpadding="0">
<tr>
<td>testing the width</td>
</tr>
</table>
</div>
</body>
</html>
If you want a table to have its width defined by margins alone you would need to use an outer wrapper that has its width defined by margins instead and then you could set the inner table to 100% width.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#outer {
margin:0 300px;
border:2px solid red;
}
table {
border:1px solid blue;
width:100%;
}
</style>
</head>
<body>
<div id="outer">
<table cellspacing="0" cellpadding="0">
<tr>
<td>testing the width</td>
</tr>
</table>
</div>
</body>
</html>
Thanks guys for the response, I think I am beginning to understandBUT I guess I neglected to mention I was referring to NEGATIVE margin.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
</head>
<body>
<div style="width:400px;"><table border="1" cellspacing="10" style=" margin-right:-200px;">
<tr>
<th scope="col"> </th>
<th scope="col"> </th>
<th scope="col"> </th>
<th scope="col"> </th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table></div>
<DIV style="width:400px;background:pink "><DIV style=" background:teal; margin-right:-200px; ">some content (wider)</DIV></DIV>
<DIV style="width:400px;background:pink "><DIV style=" background:teal; margin-right: 200px; ">some content (narrower)</DIV></DIV>
</body>
</html>
note what I how am able to EXPAND/contract the teal div, so that in a sense it is either 200px wider or narrower than its container… while the table does not accept this…
AFTER what you guys said, what I am seeing here is that the table’s width is actually set IF the element width is not defined, but then that means a table’s with is always defined by the UA even when set to auto??
note what I how am able to EXPAND/contract the teal div, so that in a sense it is either 200px wider or narrower than its container… while the table does not accept this…
Yes ,that’s because as I said above you can’t define the width of a table using margins. 
AFTER what you guys said, what I am seeing here is that the table’s width is actually set IF the element width is not defined, but then that means a table’s with is always defined by the UA even when set to auto??
No the table’s width is defined by its content where no width has been specified. It will only be as wide as the content it holds.
To accomplish the negative margin trick you would need to use the wrapper as I mentioned earlier.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">
table{width:100%}
</style>
</head>
<body>
<div style="width:400px;border:1px solid red">
<div style="margin-right:-200px;">
<table border="1" cellspacing="10">
<tr>
<th scope="col"> </th>
<th scope="col"> </th>
<th scope="col"> </th>
<th scope="col"> </th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</div>
</body>
</html>
Margins are handled differently depending on the type of element and indeed if you floated your coloured divs the 200px right negative margin would not stretch the element but instead allow content to overlap from that side by 200px instead.
I think I understand now, Paul. Thank you.
I guess what I was trying to say in my previous is that, in THIS regards, a table behaves like an element that has been given explicit width… no matter what.
Ok, yes I see what you meant Yes the table will basically behave as though it has intrinsic width where the width is defined by its content so you can’t really stretch it with margins as the box model becomes over constrained.