Search code examples
csshtml-tableoverflowpre

CSS - placing overflow:auto inside overflow:hidden


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?


Solution

  • 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;
    }