CSS-放置溢出：自动内部溢出：隐藏

我正在创建一个网站，我需要为

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

那不行，因为

但这并不能让我满意，因为整个表都在滚动，我希望行号（首先是
）保持不变


现在你明白了。我的问题是：是否有一种方法可以实现我的结果，而无需通过一些棘手的
响应.js
-相似脚本为我的
元素指定一个静态
宽度属性？
如果希望保留行号。。让它们完全定位怎么样？并在代码中添加适当的填充

尝试应用溢出：秒自动这是否有用@MaheshPatidar
元素不支持
溢出
属性。（请参阅）查看我的回答，如果
td.行
将比
20px
长怎么办？假设我有一个包含10000行代码的源文件，行号
9234
肯定会比
20px
长。同意，那么您可能可以使用javascript根据行宽设置此填充，例如，像jquery这样：$（'td.code'）.css（'padding-left'，$（'td.lines'）.width（）+“px”）；哦，我多么不喜欢使用JavaScript进行样式化。。。如果有人禁用了它？有什么办法吗？现在相当多的网站都依赖javascript，所以我认为当有人禁用它时，这种情况非常罕见。您还可以将行作为独立的html元素放在表外（而不是td），不管怎样，您已经将行号从代码中分离出来了，但这需要更改html标记。我相信还有很多其他的方法可以做到这一点哦，听起来很糟糕，我想我会继续使用JS。新的问题是，Gists文件嵌入了
标记，这些标记编写DOM元素。因此，在执行jQuery时，表不在那里。
.file {
    overflow: hidden;
    width:340px;
}

td.code pre {
    overflow: auto;
}

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

td.code pre {
    overflow: auto;
}

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