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

Question

我现在正在创建一个站点，我需要为 <pre> 提供支持带有语法高亮和行号的标签(我为此使用 GitHub Gists，但这并不重要)。

问题是，我的网站是响应式的，我无法分配静态 width我的属性(property)<pre>在<td> , 因为表格可以调整大小。

---

如果你想看一个活生生的例子，here's the example I created to show you what I'm talking about: 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属性(property)。我设法以某种方式允许滚动的唯一方法是应用 overflow: auto到我的.file类:

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

td.code pre {
    overflow: auto;
}

但这并不能满足我，因为整个表格正在滚动，我希望行号(第一个<td>)保留。

---

现在你明白了。我的问题是:有没有办法在不分配静态 width 的情况下实现我的结果？属性(property)归我<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;
}