CSS - placing overflow:auto inside overflow:hidden

Question

I am creating a site right now and I need to provide support for <pre> tags with syntax highlighting and line numbers (I'm using GitHub Gists for that, but it doesn't matter).

The problem is, that my site is responsive and I can't assign a static width property for my <pre> in a <td>, because the table can be resized.

---

If you want to see a live example, here's the example I created to show you what I'm talking about: http://jsfiddle.net/akashivskyy/jNRrn/.

---

If you don't want to move anywhere, here's a brief explanation...

My basic tree looks like 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 is a very very long string"];
NSLog(@"%@", title2);</pre>
            </td>
        </tr>
    </table>
</div>

And the very basic CSS:

.file {
    overflow: hidden;
    width:340px;
}

td.code pre {
    overflow: auto;
}

That doesn't work, because <pre> has no width property. The only way I managed to somehow allow scrolling is by applying overflow: auto to my .file class:

.file {
    overflow: auto;
    width:340px;
}

td.code pre {
    overflow: auto;
}

But this doesn't satisfy me, because the whole table is being scrolled and I want the line numbers (first <td>) to stay.

---

Now you get the point. My question is: Is there a way to achieve my result without assigning a static width property to my <pre> element by some tricky responsive.js-alike scripts?

Answer 1

if you want the line numbers to stay.. how about making them absolutely positioned? And add appropriate padding to code.

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