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? stackoverflow.com/questions/1312236/… — Pigueiras
– Pigueiras, Commented May 10, 2013 at 9:18
@MaheshPatidar <td> elements don't support overflow property. (see stackoverflow.com/questions/9152042/…) — akashivskyy
– akashivskyy, Commented May 10, 2013 at 9:18

paulitto · Accepted Answer · 2013-05-10 09:18:43Z

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, 2013 at 9:18

paulitto

4,6932 gold badges24 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

akashivskyy Over a year ago

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.

paulitto Over a year ago

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");

akashivskyy Over a year ago

Oh how I don't like to use JavaScript for styling... And if someone has disabled it? Is there any way?

paulitto Over a year ago

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

akashivskyy Over a year ago

Oh sounds terrible, I think I'll stay with JS. The new problem is, that Gists files are embedded with <script> tags which write DOM elements. Therefore, the tables are not there when your jQuery is executed.

|

Collectives™ on Stack Overflow

CSS - placing overflow:auto inside overflow:hidden

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related