css - 将 pre 包装在表格单元格内

标签 css twitter-bootstrap twitter-bootstrap-3

我使用最新的 twitter bootstrap,我在表格单元格内的预标记方面遇到了一些麻烦,如果行太长,它应该创建水平滚动,但它不会发生。

http://jsfiddle.net/52VtD/6958/没有前置的例子

<div class="row">
    <div class="container">
        <div class="col-md-3" style="border: 1px solid red;">
            this is col-md-3? yes :)
            <table class="table">
                <thead>
                    <tr><th>author</th><th>content</th></tr>
                </thead>
                <tbody>
                    <tr><td>somebody</td><td></td></tr>
                </tbody>
            </table>
        </div>
        <div class="col-md-9" style="border: 1px solid black;">test</div>
    </div>
</div>

http://jsfiddle.net/52VtD/6959/示例与 pre

<div class="row">
    <div class="container">
        <div class="col-md-3" style="border: 1px solid red;">
            this is col-md-3? no :(
            <table class="table">
                <thead>
                    <tr><th>author</th><th>content</th></tr>
                </thead>
                <tbody>
                    <tr><td>somebody</td><td>why I cannot wrap it?<br/><pre>&lt;?php<br/>class A<br/>{<br/>    function foo()<br/>    {<br/>        if (isset($this)) {<br/>            echo '$this is defined (';<br/>            echo get_class($this);<br/>            echo &quot;)\n&quot;;<br/>        } else {<br/>            echo &quot;\$this is not defined.\n&quot;;<br/>        }<br/>    }<br/>}<br/><br/>class B<br/>{<br/>    function bar()<br/>    {<br/>        // Note: the next line will issue a warning if E_STRICT is enabled.<br/>        A::foo();<br/>    }<br/>}<br/><br/>$a = new A();<br/>$a-&gt;foo();<br/><br/>// Note: the next line will issue a warning if E_STRICT is enabled.<br/>A::foo();<br/>$b = new B();<br/>$b-&gt;bar();<br/><br/>// Note: the next line will issue a warning if E_STRICT is enabled.<br/>B::bar();<br/>?&gt;</pre></td></tr>
                </tbody>
            </table>
        </div>
        <div class="col-md-9" style="border: 1px solid black;">test</div>
    </div>
</div>

我不知道我能做什么,我用 css properites 尝试了很多次。

最佳答案

尝试使用:

<pre><code> your example code here </code></pre>

关于css - 将 pre 包装在表格单元格内,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24716867/

相关文章:

css - Eclipse 4.4 Luna 丑陋主题与 XFCE 4.11

jquery - Bootstrap 多选 'No search Result message'

jquery - 在选项卡内使用 iframe

javascript - 在弹出窗口中 Bootstrap 提前输入

html - 在没有 form-horizo​​ntal 和 col-XX 类的同一行上输入和标签

html - Tumblr 照片集百分比宽度

javascript - jQuery - 如何使水平拆分器显示在中间,即使屏幕已重新调整大小时

css - 如何使用带有 ID 名称的 .selected 更改超链接颜色?

html - Bootstrap 导航栏在带有表格的页面上太短

html - Bootstrap 列在 chrome 中是正确的,但在 Internet Explorer 11 中不呈现。?