Question

How can I prevent table cells from overlaping? I need to keep the table on the left within the table data in a fixed position so the data on the right requires scrolling the left td cell will remain there.

I have an example of the html here –

http://jsbin.com/ifiha4/edit#preview

and code –

<table ID="Table1" Width="100%">
    <tr>
        <td align="center" class="style2"> 
            <table border="" style="width:20%;position:fixed;left:54px; top: 84px;">
                <th>some table</th>
                <tr>
                    <td>&nbsp</td>
                </tr>
            </table>
        </td>
        <td align="center">
            some text blah blah blah    
        </td>
     </tr>
 </table>

Answer 1

<td align="center" class="style2" style="width:100px;">

I think you should try setting widths on each column that you are using. Does this work for you?

The better way is to do this:

<div style="float:left; width:100px; border:1px solid black">

Column 1 content

</div>


<div style="float:left; width:100px; border:1px solid black">

Column 2 content

</div>

You will be happy you changed to div in the long run. 🙂

http://jsbin.com/ifiha4/7/edit#preview