使 HTML 表格单元格内的代码块可滚动答案

【问题标题】：Make code block inside HTML table cell scrollable使 HTML 表格单元格内的代码块可滚动
【发布时间】：2020-02-26 22:50:47
【问题描述】：

我想了解如何使表格单元格内的代码块可滚动。

代码：

<div class="container mt-5 mb-5">
    <table class="table table-bordered">
        <tbody>
        <tr>
            <th>Code</th>
            <td>
                <pre>
                    <code class="language-csharp">
                        Prism.languages.markup = {
                            'comment': /<!--[\s\S]*?-->/,
                            'prolog': /<\?[\s\S]+?\?>/,
                            'doctype': /<!DOCTYPE[\s\S]+?>/i,
                            'cdata': /<!\[CDATA\[[\s\S]*?]]>/i,
                            'tag': {
                                pattern: /<\/?(?!\d)[^\s>\/=$<]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+))?)*\s*\/?>/i/<\/?(?!\d)[^\s>\/=$<]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+))?)*\s*\/?>/i,
                                inside: {
                                    'tag': {
                                        pattern: /^<\/?[^\s>\/]+/i,
                                        inside: {
                                            'punctuation': /^<\/?/,
                                            'namespace': /^[^\s>\/:]+:/
                                        }
                                    },
                                    'attr-value': {
                                        pattern: /=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+)/i,
                                        inside: {
                                            'punctuation': [
                                                /^=/,
                                                {
                                                    pattern: /(^|[^\\])["']/,
                                                    lookbehind: true
                                                }
                                            ]
                                        }
                                    },
                                    'punctuation': /\/?>/,
                                    'attr-name': {
                                        pattern: /[^\s>\/]+/,
                                        inside: {
                                            'namespace': /^[^\s>\/:]+:/
                                        }
                                    }

                                }
                            },
                            'entity': /&#?[\da-z]{1,8};/i
                        };
                    </code>
                </pre>
            </td>
        </tr>
        </tbody>
    </table>
    <div>
        <pre>
            <code class="language-csharp">
                Prism.languages.markup = {
                    'comment': /<!--[\s\S]*?-->/,
                    'prolog': /<\?[\s\S]+?\?>/,
                    'doctype': /<!DOCTYPE[\s\S]+?>/i,
                    'cdata': /<!\[CDATA\[[\s\S]*?]]>/i,
                    'tag': {
                        pattern: /<\/?(?!\d)[^\s>\/=$<]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+))?)*\s*\/?>/i/<\/?(?!\d)[^\s>\/=$<]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+))?)*\s*\/?>/i,
                        inside: {
                            'tag': {
                                pattern: /^<\/?[^\s>\/]+/i,
                                inside: {
                                    'punctuation': /^<\/?/,
                                    'namespace': /^[^\s>\/:]+:/
                                }
                            },
                            'attr-value': {
                                pattern: /=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+)/i,
                                inside: {
                                    'punctuation': [
                                        /^=/,
                                        {
                                            pattern: /(^|[^\\])["']/,
                                            lookbehind: true
                                        }
                                    ]
                                }
                            },
                            'punctuation': /\/?>/,
                            'attr-name': {
                                pattern: /[^\s>\/]+/,
                                inside: {
                                    'namespace': /^[^\s>\/:]+:/
                                }
                            }

                        }
                    },
                    'entity': /&#?[\da-z]{1,8};/i
                };
            </code>
        </pre>
    </div>
</div>

JSFiddle： https://jsfiddle.net/sergiutripon/mubrebmw/1/

正如您在上面的链接中看到的，表格单元格内的代码不可滚动，并且会放大网页的正文。

表格下方的代码块只是在一个 div 中，并且是可滚动的。

我想为表内的代码块实现与表外的代码块相同的行为，但我不太确定如何。

【问题讨论】：

您可以添加明确的宽度和overflow: auto。
@Phix 我不想添加固定宽度，width: 100% 或 width: auto 不起作用。
只是<code style="overflow: auto;">... chick this fiddle
@SaidbakR 小提琴不起作用。内容不可滚动，它超出了容器的宽度，并在整个网页上产生了一个滚动条，这是我试图避免的。

标签： html css html-table codeblocks

【解决方案1】：

您需要做的就是在<pre> 和overflow 中添加一个您喜欢的高度，其值为scroll：

<pre style="height: 500px; overflow: scroll;">

不要使用内联样式，它们会减慢您的页面速度，看起来很糟糕，而且是不好的做法。所以这里是css：

pre {
  overflow: scroll;
  height: 500px;
}

希望这会有所帮助。

【讨论】：

【解决方案2】：

使用overflow:scroll 属性在表格单元格内嵌套一个div 块应该可以解决问题。

<td><div style="overflow:scroll;">Your Scrollable Content</div></td>

【讨论】：

尝试在表格单元格中添加最大高度和最大宽度。 jsfiddle.net/Hoargarth/4zvsdn8z（对不起，我的这个小提琴看起来有点 sh** 但是在移动设备上使用 jsfiddle 实在是太糟糕了......）
我不想使用固定宽度