Question

I have HTML Like Below. I have a table inside another table.Each TD in the inner table will contain a Scrollable Span defined with a CSS Class as below. The span will have scroll bars and scroll only if the width is defined as a value(like 100px).If I give Width as Auto the scroll bar does not appear and text simply overflows the TD and Table boundaries and spoils the layout. What I have to do is generate this dynamically(from ASP.NET Web Control). The inner table row can have many TDS. So each TD will be generated with a width as 100/#ofTDs %. And each TD will contain a scrollable Span. I cannot set the width on the span.I need it to be the same as the containing TD and scroll the rest by displaying a horizontal scroll bar. Any Ideas ??

  .OuterTable
    {
        Color:Red;
        width:120px;
        white-space:nowrap;
    }
    .SpanClass
    {
        overflow:auto;
        display:block;
        width:auto;
        color:Blue;

    }

   <table class="OuterTable">
   <tr>
   <td>Outer Table  Column</td>
   <td>
   <table class="InnerTable">
   <tr>
   <td><span class="SpanClass"> This is  A LINE IN Inner 
   table  .this is the first line . Line 1 line1 jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj</span></td>
   </tr>
   </table>
   </td>
   </tr>
   </table>

Answer 1

First try: http://jsfiddle.net/zZDvq/

This is similar to what you want to create?