untested: take out 'margin-left' and use 'padding-left' instead.
or
You could indent your cells value without using a nested table, by adding the padding-left to your parent tables 'td'.
Jobo
2009-01-20 01:54:11
+1
A:
Yes, this solves the problem. But why?
Alessandro Vernet
2009-01-20 02:04:03
The reason is because your child table has its width set to 100% which means it will always completely fill the space in which its in. Further to that, the margin-left pushes it way over that 100% threshold and outside of it its space that its filled up.
Jobo
2009-01-20 02:14:01
A:
This is because you're giving the table width 100%. It adds the margin onto this, such that the element has >100% width. If you want to get around this, add a div or something above the nested table with a margin: 3em and you can leave the width of the table at 100%.
EDIT: In response to Jobo's comment to his answer, tds don't support margins; however, a padding-left: 3em should work instead.
jennyfofenny
2009-01-20 01:56:09
A:
This is not intended to be an attack, but rather an aid to help you be a better developer:
- There is NEVER a need to have sub tables.
- if you are going to use CSS then do it right, one or more external files.
- This will help you develop as a web developer - think about how you want to structure the page and then use the correct markup to produce that structure - once the markup is valid then you can worry about styling.
Jamie Lewis
2009-01-20 01:57:16
-1 Sorry there are valid reasons to have nested tables, particularly with dynamically generated content. Not common these days but never? No way.
cletus
2009-01-20 02:16:57
Why would dynamically generated content effect the need for nested stables? Static and Dynamic content are all the same on the client side. If you are placing tables within tables then clearly the structure of you page is poor.
Jamie Lewis
2009-01-20 02:23:35
+3
A:
The inner table is being told to be as wide as its container (width: 100%), and then to move 3ems away from its left edge: (margin-left: 3em)
Switch the innermost TD to have padding-left which might help.
But the standard response here is: "oh god why are you doing nested tables you bad bad man!!11"
nickf
2009-01-20 01:58:35
+1
A:
This is happening because you are setting "margin-left: 3em", and it is pushing the sub-table outwards.
Marcel Tjandraatmadja
2009-01-20 01:59:56
A:
Try this:
<!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" xml:lang="en" lang="en">
<body>
<table border="1">
<tr>
<td style="padding-left: 3em;">
<table border="1" style="width: 100%;">
<tr>
<td>gaga</td>
</tr>
</table>
</td>
</tr>
</table>
<table border="1">
<tr>
<td>
<table border="1" style="margin-left: 3em; width: 100%">
<tr>
<td>gaga</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Changing margin-left from the TABLE element to padding-left on parent TD (like Jobo said)
Héctor Vergara R.
2009-01-20 02:35:36
A:
Just remove the "width" attribute of that table and you should see that it will stay within the cell, even with long text.
netrox
2009-01-20 03:18:09