IE7模式将表头内容挤压到多行左侧

Question

我有一个要在此处生成的表的示例：

http://jsfiddle.net/DTsxa/

虽然在IE7模式或IE8兼容模式下使用Internet Exploder查看表时，我对表头有困难。 文本“截至2010年11月19日的基金业绩数据”应该在一行上，但是在多行上被压到左边。

我以为是white-space: nowrap; （根据下面的示例）可能已修复此问题，但它根本没有任何影响。

<tr>
    <th class="TableHeaderRow" colspan="8">This Fund's Performance Figures as at 1 December 2010</th>
</tr>

用这个CSS：

th.TableHeaderRow
{
    background-color: #A4A247;
    padding: 10px 5px;
    font-weight:bold;

    white-space: nowrap;
}

有人可以看到解决这个问题的方法吗？

Answer 1

你的问题似乎在这里：

.PerformanceTable th
{
    width: 50px;
    border-left: solid 1px #00573D;
    border-top: solid 1px #00573D;

    /*background-color: #FFF;
    color: #00573D;*/
    vertical-align: top;


    /*height:28px;*/
}

IE接受您的宽度：50px，并强制将其缩短。 删除该行使它看起来对我来说正确。 试试看

Answer 2

尝试使用“空白：pre;”。 这似乎比nowrap更好。