html - 在 td 中使用 pre 标签

Question

我在使用 <pre> 时遇到问题标签内 <td> .我有 JSF 数据表和它的三列。我需要所有三列都包含预格式化的文本。

如果我使用 <pre>标记文本显示为我需要的预格式化但列的宽度比文本大得多。

我可以通过指定 white-space: pre-line; 在 css 中解决这个问题在 <pre>标签的样式。但它只适用于 firefox 和 IE，chrome 忽略这种风格。

所以我的问题是:有没有办法解决 <td> 的宽度？其中包含 <pre>标签在里面？

编辑:

我的 CSS 类:

.dt_row {
    height: 8px;
    margin: 3px 3px 3px 3px;
    color: #000000;
    white-space: pre-line;
}

还有我的数据表:

    <h:dataTable value="#{searchBean.searchResult.concordances}"
                 var="concordance">

        <h:column>
            <pre class="dt_row">
                #{concordance.left}
            </pre>
        </h:column>

        <h:column>
            <pre class="dt_row" style="color: blue;">
                #{concordance.middle}
            </pre>
        </h:column>

        <h:column>
            <pre class="dt_row">
                #{concordance.right}
            </pre>
        </h:column>

    </h:dataTable>

编辑:

我找到了解决方案。而不是 <pre>标签，我用过<code>现在所有数据都完美显示。

Answer 1

pre 元素默认占用 100% 宽度，即整个可用宽度。然而，在表格单元格中，这是相对于单元格宽度的，默认情况下，带有 pre 的单元格与最长行所需的宽度一样宽。如果不是这种情况，则需要找出导致偏离默认值的代码，并进行修改。

例如，如果您在 table 元素上设置了 width 属性，只需删除该设置即可。