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;

的CSS添加：table（具有讽刺意味）

Fiddle

---

原始答案：

在pre元素中使用table标签是众所周知的问题，即由于相对宽度计算问题导致滚动和实际宽度设置正确。因此，我会避免基于表的设置，尤其是因为您还没有显示表格数据（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;
}