I am trying to create a hierarchical display of nested tables, where each sub level is indented further from the parent. I'm open to using table or div. The closest I've come is below. It looks mostly correct in IE (except that the borders on the right are mashed together). In Chrome the sub item border is extending beyond the parent on the right.
I'm open to using divs as well.
<html>
<head>
<style type="text/css">
.ItemTable
{
width: 100%;
margin-left: 20px;
border: solid 1px #dbdce3;
}
</style>
</head>
<body>
<table class="ItemTable">
<tr>
<td>Item 1</td>
</tr>
<tr>
<td>
<table class="ItemTable">
<tr>
<td>Item 1A</td>
</tr>
</td>
</tr>
</table>
</body>
</html>
-
changing
margin-left: 20px;to
padding-left: 20px;works for me on IE7, firefox and chrome (although with chrome I had to un-maximise the window then remaximise it - looks like a rendering bug to me)
-
Looks like a couple of things. Your sub table was missing it's close tag and i added padding to the TD to help with the indent:
<style type="text/css"> .ItemTable { width: 100%; border: solid 1px #dbdce3; } .ItemTable td { width: auto; padding-left: 20px; border: solid 1px #dbdce3; } </style> <table class="ItemTable"> <tr> <td> Item 1 </td> </tr> <tr> <td> <table class="ItemTable"> <tr> <td> Item 1A </td> </tr> </table> </td> </tr> </table>Tested it in Chrome, FF, IE6, IE7 and Safari and it looks like it works.
-
Do you plan on displaying tabular data? If not you would be better just using div's for this and just applying a margin to the child element like shown below
<style> #container {border:1px solid #999} .indent {margin-left:50px; border:1px solid #999;} .item {background:#99cc00;} </style> <div id="container"> <span class="item">This is item 1</span> <div class="indent"> <span class="item">This is item 2</span> <div class="indent"> <span class="item">This is item 3</span> </div> </div> </div>Of course it really depends on what you are trying to display.
0 comments:
Post a Comment