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?

Could this be useful? http://stackoverflow.com/questions/1312236/how-do-i-create-an-html-table-with-fixed-frozen-left-column-and-scrollable-body — Pigueiras, May 10 '13 at 09:18
@MaheshPatidar `` elements don't support `overflow` property. (see http://stackoverflow.com/questions/9152042/overflow-attribute-on-td-does-not-create-a-scrollbar) — akashivskyy, May 10 '13 at 09:18

score 2 · Accepted Answer · answered May 10 '13 at 09:18

2

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

answered May 10 '13 at 09:18

paulitto

4,585
2
22
28

And what if `td.lines` will be longer than `20px`? Imagine I have a source file with 10000 lines of code, line number `9234` will be definitely longer than `20px`. – akashivskyy May 10 '13 at 09:25
Agree, then probably you can set this padding by javascript depending on lines width, e.g. like this with jquery: $('td.code').css('padding-left', $('td.lines').width()+"px"); – paulitto May 10 '13 at 09:31
Oh how I don't like to use JavaScript for styling... And if someone has disabled it? Is there any way? – akashivskyy May 10 '13 at 09:33
Pretty a lot of sites depend on javascript these days, so I think its a really rare case when someone disables it. You can also put lines as an independent html element out of table (not as td), anyway you already have line numbers separated out from code, but that would require changing your html markup. I believe there are really a lot of other ways to do this – paulitto May 10 '13 at 09:44
Oh sounds terrible, I think I'll stay with JS. The new problem is, that Gists files are embedded with ` – akashivskyy May 10 '13 at 09:47
try executing jquery on dom ready (when all dom elements added), see http://api.jquery.com/ready/ like this: $(function(){ //jquery code }) – paulitto May 10 '13 at 09:53
OK, I got it. Thanks for help! :) – akashivskyy May 10 '13 at 09:54

CSS - placing overflow:auto inside overflow:hidden

1 Answers1