two tier grid inside of a table


L

Larzo

I am trying to create this two tier type of grid which shows how many contiguous channels are allocated per group. It shows the channels in yellow
against a blue back drop. I use an absolute div inside a relative div.
This seems to work fine, but when I put the cells inside of a table TD and have other cells to the left in a different TD it causes a line break to occur. The html is below




======================= html =====================


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>

</head>
<body>




<br>
<br>


<table>

<tbody><tr><td> some text here</td></tr>
<tr> <td>
<div style="position: relative; width: 900px;">


<span style="position: absolute; left: 100px;">
other text zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz
</span>

&nbsp;

<div style="position: absolute; top: 0px; left: 300px; width: 600px; background-color: blue;">
&nbsp;

<span style="position: absolute; left: 201px; width: 100px; background-color: yellow;">
&nbsp;
</span>
</div>

</div>
</td></tr>


<tr><td> some text here</td></tr>
<tr> <td>
<div style="position: relative; width: 900px;">


<span style="position: absolute; left: 100px;">
other text zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz
</span>

&nbsp;

<div style="position: absolute; top: 0px; left: 300px; width: 600px; background-color: blue;">
&nbsp;

<span style="position: absolute; left: 221px; width: 100px; background-color: yellow;">
&nbsp;
</span>
</div>

</div>
</td></tr>


<tr><td> some text here</td></tr>
<tr> <td>
<div style="position: relative; width: 900px;">


<span style="position: absolute; left: 100px;">
other text zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz
</span>

&nbsp;

<div style="position: absolute; top: 0px; left: 300px; width: 600px; background-color: blue;">
&nbsp;

<span style="position: absolute; left: 335px; width: 100px; background-color: yellow;">
&nbsp;
</span>
</div>

</div>
</td></tr>


<tr><td> some text here</td></tr>
<tr> <td>
<div style="position: relative; width: 900px;">


<span style="position: absolute; left: 100px;">
other text zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz
</span>

&nbsp;

<div style="position: absolute; top: 0px; left: 300px; width: 600px; background-color: blue;">
&nbsp;

<span style="position: absolute; left: 546px; width: 100px; background-color: yellow;">
&nbsp;
</span>
</div>

</div>
</td></tr>


<tr><td> some text here</td></tr>
<tr> <td>
<div style="position: relative; width: 900px;">


<span style="position: absolute; left: 100px;">
other text zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz
</span>

&nbsp;

<div style="position: absolute; top: 0px; left: 300px; width: 600px; background-color: blue;">
&nbsp;

<span style="position: absolute; left: 72px; width: 100px; background-color: yellow;">
&nbsp;
</span>
</div>

</div>
</td></tr>


<tr><td> some text here</td></tr>
<tr> <td>
<div style="position: relative; width: 900px;">


<span style="position: absolute; left: 100px;">
other text zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz
</span>

&nbsp;

<div style="position: absolute; top: 0px; left: 300px; width: 600px; background-color: blue;">
&nbsp;

<span style="position: absolute; left: 32px; width: 100px; background-color: yellow;">
&nbsp;
</span>
</div>

</div>
</td></tr>


</tbody></table>





</body></html>
 
Ad

Advertisements


Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top