CSS - 置顶溢出:auto inside overflow:hidden

Question

我现在正在创建一个站点,我需要为<pre>带有语法高亮和行号的标签提供支持(我正在使用GitHub Gists,但这没关系).

问题是,我的网站响应,我不能指定一个静态width属性我 <pre>的<td>,因为表可以调整.

---

如果你想看一个实例,这里是我创建的例子,向你展示我在说什么:http://jsfiddle.net/akashivskyy/jNRrn/.

---

如果你不想搬到任何地方,这里有一个简短的解释......

我的基本树看起来像这样:

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

而且很基本的CSS:

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

td.code pre {
    overflow: auto;
}

这不起作用,因为<pre>没有width财产.我设法以某种方式允许滚动的唯一方法是申请overflow: auto我的.file班级:

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

td.code pre {
    overflow: auto;
}

但这并不能让我满意,因为整个表格都在滚动,我想要<td>保留行号(第一个).

---

现在你明白了.我的问题是:有没有办法实现我的结果,而没有通过一些棘手的类似脚本width为我的<pre>元素分配静态属性responsive.js？

Answer 1

如果你想让行号保持不变……让它们绝对定位怎么样？并向代码添加适当的填充。

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