How to style this?

[Muiter]

I have no idea how to style this. My goal is to get an simple structure with folders (can contain an subfolder) and products.How can I make an nice view with lines from the products to the folder or subfolder that holds them?Generated html:

<tr>					<td width="50" class="dblclick" id="2_folder|naam|1|256">folder 1</td><td></td>								<td>__3x Plaat 200 201.5 12|2200</td>								<tr/>								<td></td><td></td>								<td>__5x Ring 400.0 100 15|1900</td>								<tr/>								<td></td><tr/>							<td></td></tr><tr>					<td width="50" class="dblclick" id="2_folder|naam|2|256">folder 2</td><td>|__<span class="dblclick" id="2_folder|naam|7|256">subfolder 2</span></td><td>__5x Flens </td>								<tr/>								<td></td>								<td></td><td>__2x test a </td>								<tr/>								<td></td>								<td></td><tr/>							<td></td><td>|__<span class="dblclick" id="2_folder|naam|9|256">subfolder 2aa</span></td><tr/>							<td></td><tr/>							<td></td></tr><tr>					<td width="50" class="dblclick" id="2_folder|naam|3|256">folder 3</td><td></td>								<td>__5x Flens </td>								<tr/>								<td></td><td></td>								<td>__2x test a </td>								<tr/>								<td></td><tr/>							<td></td></tr>

[MrFish]

You could try using lists and css. I think that would be the easiest way.

<style type='text/css'>	ul	{		margin: 3px 0px 3px 10px;		font-weight: 700;		font-size: 14px;	}	ul li	{		margin-left: 5px;		list-style-type: none;		font-weight: 500;		font-size: 12px;		cursor: pointer;	}	ul li:hover	{		background-color: #eee;	}</style><ul>	Folder	<li>item.htm</li>	<li>item.php</li>	<li>image.png</li>	<ul>		Sub Folder		<li>item.js</li>	</ul>	<ul>		Sub Folder		<ul>			Sub sub folder			<li>item.css</li>			<li>item.php</li>		</ul>	</ul></ul>

[Muiter]

Good tip MrFish, did not think of that.I have made an quick sample code to see if it will suit my needs. Any ideas how to get rit of the blank lines?

<table width="100%"><tr>	<ul>		<li class="folder">Milk</li>					<ul>						<li class="product">Milk</li>						<li class="product">Toilet Paper</li>						<li class="product">Cereal</li>						<li class="product">Bread</li>					</ul>		<li class="folder">Toilet Paper</li>		<li class="folder">Cereal</li>			<ul>				<li class="subfolder">Milk</li>				<li class="subfolder">Toilet Paper</li>					<ul>						<li class="product">Milk</li>						<li class="product">Toilet Paper</li>						<li class="product">Cereal</li>						<li class="product">Bread</li>					</ul>				<li class="subfolder">Cereal</li>				<li class="subfolder">Bread</li>			</ul>		<li class="folder">Bread</li>	</ul></tr></table>

[Ingolme]

Remove top and bottom margins from the the <ul> elements (set them to zero.)

[Muiter]

Remove top and bottom margins from the the <ul> elements (set them to zero.)

Thx, it works.