CSS - 将overflow:auto放置在overflow:hidden内部

Question

我现在正在创建一个网站，需要支持带有语法高亮和行号的<pre>标签（我使用GitHub Gists，但这不重要）。

问题是，我的网站是响应式设计的，我不能为<td>中的<pre>分配一个固定的width属性，因为表格可以被调整大小。

---

如果你想看实时示例，这里是我创建的示例，展示了我所说的问题：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;
}

但这并不能满足我的需求，因为整个表格都被滚动了，我希望行号（第一个）保持不变。

---

现在你明白了我的问题。我的问题是：是否有一种方法可以在不使用类似于响应式.js的诡异脚本来分配静态宽度属性给我的

元素的情况下实现我的结果？

- akashivskyy

---

尝试在第二个<td>上应用overflow:auto。 - Mahesh Patidar

这个有用吗？https://dev59.com/vHM_5IYBdhLWcg3wmkQK - Pigueiras

@MaheshPatidar <td> 元素不支持 overflow 属性。（请参见 https://dev59.com/Amox5IYBdhLWcg3whUqm） - akashivskyy

请查看我的答案。 - Mahesh Patidar

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

- paulitto

---

同意，那么你可以根据行宽使用JavaScript来设置这个填充，例如使用jQuery的方法： $('td.code').css('padding-left', $('td.lines').width()+"px"); - paulitto

哦，我真不喜欢使用JavaScript来进行样式设计...如果有人禁用了它怎么办？有什么解决方法吗？ - akashivskyy

现在很多网站都依赖于JavaScript，所以我认为很少有人会禁用它。您还可以将行作为独立的HTML元素放置在表格之外（而不是作为td），无论如何，您已经将行号从代码中分离出来，但这需要更改您的HTML标记。我相信还有很多其他方法可以做到这一点。 - paulitto

尝试在DOM准备就绪时（即所有DOM元素添加完成后）执行jQuery，请参见http://api.jquery.com/ready/像这样： $（function（）{ // jQuery代码 }） - paulitto

好的，我明白了。谢谢你的帮助！ :) - akashivskyy