CSS：使用滚动条显示 PRE 标记的容器

Question

我有一些服务器端代码可以在 html <pre></pre> 标签中输出内容，我希望能够将它们放入带有滚动条的容器中。 （特别是表格单元格 - 宽度相等）。显然我想保留<pre> 标签空白格式。

(see this jsfiddle):

HTML：

<table>
<tr>
    <th>Col 1</th>
    <th>Col 2</th>
</tr>
    <tr>
        <td><pre>
function thisIsATest(bla){
    Testing 123456789 Testing 123456789 Testing 123456789
}
        </pre></td>
        <td><pre>
function thisIsATest(bla){
    Testing 123456789 Testing 123456789 Testing 123456789
}
        </pre></td>
    </tr>
</table>

CSS：

table { 
    width: 100%; 
    border: 1px solid red;
}
td { 
    width: 50%;
    overflow: scroll; 
    border: 1px solid blue;
}

（我正在 Firefox 中测试它）。我究竟做错了什么？谢谢

Answer 1

更新

解决此问题的最简单方法是将：table-layout:fixed;（讽刺）添加到 table 的 CSS 中

Fiddle

---

原答案：

在table 元素中使用pre 标记是出了名的问题，即由于相对宽度计算的问题，这会直接导致滚动和实际宽度设置。因此，我会避免使用基于表格的设置，尤其是因为您也没有显示表格数据（aaah 语义！）。

我会根据以下内容更改您的布局：

Demo Fiddle

HTML

<div class='container'>
    <div class='col'> <pre>
function thisIsATest(bla){
    Testing 123456789 Testing 123456789 Testing 123456789
}
        </pre>

    </div>
    <div class='col'> <pre>
function thisIsATest(bla){
    Testing 123456789 Testing 123456789 Testing 123456789
}
        </pre>

    </div>
</div>

CSS

* {
    box-sizing:border-box;
}
html, body {
    margin:0;
    padding:0;
}
.container {
    border: 1px solid red;
    overflow:hidden;
}
.col {
    border: 1px solid blue;
    float:left;
    width:50%;
    overflow: auto;
}

---

更新

要伪造多行（行）表格布局，请使用div 元素并酌情设置dislpay：

Demo Fiddle

HTML

<div class='table'>
    <div class='row'>
        <div class='cell'> <pre>
function thisIsATest(bla){
    Testing 123456789 Testing 123456789 Testing 123456789
}
        </pre>

        </div>
        <div class='cell'> <pre>
function thisIsATest(bla){
    Testing 123456789 Testing 123456789 Testing 123456789
}
        </pre>

        </div>
    </div>
    <div class='row'>
        <div class='cell'> <pre>
function thisIsATest(bla){
    Testing 123456789 Testing 123456789 Testing 123456789
}
        </pre>

        </div>
        <div class='cell'> <pre>
function thisIsATest(bla){
    Testing 123456789 Testing 123456789 Testing 123456789
}
        </pre>

        </div>
    </div>
</div>

CSS

* {
    box-sizing:border-box;
}
html, body {
    margin:0;
    padding:0;
}
.table {
    border: 1px solid red;
    display:table;
    table-layout:fixed;
    width:100%;
}
.cell {
    border: 1px solid blue;
    overflow: auto;
    display:table-cell;
}
.row {
    display:table-row;
}