0

インライン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が初めてで、プログラミングの練習用に構文ハイライターを設計しています。解決策はありますか？なぜこれが機能しないのですか？ ここに画像の説明を入力

4

1 に答える 1

0

html ファイルの先頭に「<!doctype html>」を追加します。

于 2013-07-24T14:59:03.960 に答える