如果div内容中有一些表格，如何使div溢出

Question

我的内联css的html代码：

<div id="ggicci_syntax_highlighter" style="border: solid 3px black; cursor: text; overflow-x: auto; width: 100%;">
    <table id="ggicci_outer_table" cellspacing="0" style="font-family:Consolas;">
        <colgroup>
            <col style="background-color: #44F;"><!-- You can set font here -->
            <col style="background-color: #f4f4f4; width: 100%;">
        </colgroup>
        <tr>
            <td></td><!-- corner -->
            <td id="ggicci_language_text" style="font-size:25px; color: #777; font-family: Arial Black;"> <!-- header -->
                C++
            </td>
        </tr>
        <tr>
            <td>
                <table id="ggicci_line_number" style="font-size: 14px; color: #DDD;"><!-- You can set style here -->
                    <tr>
                        <td>1:</td>
                    </tr>
                    <tr>
                        <td>2:</td>
                    </tr>
                    <tr>
                        <td>3:</td>
                    </tr>
                    <tr>
                        <td>4:</td>
                    </tr>
                    <tr>
                        <td>5:</td>
                    </tr>
                    <tr>
                        <td>6:</td>
                    </tr>
                    <tr>
                        <td>7:</td>
                    </tr>
                    <tr>
                        <td>8:</td>
                    </tr>
                </table>
            </td>
            <td>
                <table id="ggicci_code_body" style="font-size: 14px; width: 100%;"><!-- You can set style here -->
                    <tr>
                        <td style="background: #FFF">
                            <span style="color:#FF7700; font-weight:bold;">#include</span> &lt;iostream&gt;
                        </td>                   
                    </tr>
                    <tr>
                        <td>
                            <span style="color:blue; font-weight:bold;">using</span> namespace std;
                        </td>
                    </tr>
                    <tr>
                        <td style="background: #FFF">
                            &nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span style="color:blue; font-weight:bold;">int</span> main()
                        </td>
                    </tr>
                    <tr>
                        <td style="background:#FFF;">
                            {
                        </td>
                    </tr>
                    <tr>
                        <td>
                            &nbsp;&nbsp;&nbsp;&nbsp;std::cout &lt;&lt; <span style="color:#EB2244;">"Hello World!"</span> &lt;&lt; std::endl;<span style="color:green;">//write "Hello World!" to console............................................................</span>
                        </td>
                    </tr>
                    <tr>
                        <td style="background: #FFF">&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:blue; font-weight:bold;">return</span> 0;</td>
                    </tr>
                    <tr>
                        <td>
                            }
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</div>

当id为“ggicci_code_body”的表中的行中的文本溢出时，我无法在div中滚动内容。我是css的新手，现在我正在为编程实践设计语法高亮显示器。任何解决方案？为什么这不起作用？

Answer 1

添加'＆lt;！doctype html＆gt;'在html文件的开头。