html table - CSS - placing overflow:auto inside overflow:hidden -

i creating site right , need provide support <pre> tags syntax highlighting , line numbers (i'm using github gists that, doesn't matter).

the problem is, site responsive , can't assign static width property <pre> in <td>, because table can resized.

---

if want see live example, here's example created show i'm talking about: http://jsfiddle.net/akashivskyy/jnrrn/.

---

if don't want move anywhere, here's brief explanation...

my basic tree looks this:

<div class="file">     <table class="source">         <tr>             <td class="lines">                 <span class="line-number">1</span>                 <span class="line-number">2</span>                 <span class="line-number">3</span>             </td>             <td class="code"> <pre>nsstring *title = @"title"; nsstring *title2 = [title stringbyappendingstring:@"this very long string"]; nslog(@"%@", title2);</pre>             </td>         </tr>     </table> </div> 

and very basic css:

.file {     overflow: hidden;     width:340px; }  td.code pre {     overflow: auto; } 

that doesn't work, because <pre> has no width property. way managed somehow allow scrolling applying overflow: auto .file class:

.file {     overflow: auto;     width:340px; }  td.code pre {     overflow: auto; } 

but doesn't satisfy me, because the whole table being scrolled , want line numbers (first <td>) stay.

---

now point. question is: is there way achieve result without assigning static width property <pre> element tricky responsive.js-alike scripts?

if want line numbers stay.. how making them absolutely positioned? , add appropriate padding code.

/* previous solution */ .file {     overflow: auto;     width:340px; } td.code pre {     overflow: auto; } /* + add */ td.lines {     position:absolute; } td.code{     padding-left:20px; }