Question

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

代码：

<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中，并且可以滚动。

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

Answer 1

使用overflow：scroll属性将div块嵌套在表格单元格中应该可以解决问题。

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

Answer 2

您需要做的就是在<pre>中添加您喜欢的高度，并使用scroll的值添加溢出：

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

但是肥胖的不是内联样式，它们会减慢页面速度并且看起来很糟糕所以这是css

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

希望这有帮助

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

2 个答案: