长线在HTML表玷污的其他线路布局

Question

我有一个HTML表格作为布局页面（不好的做法，我知道）。此表是这样的：

Label1    Value1
Label2    Value2
Label3    Value3
Label4    Value4a   Value4b    Value4c   Value4d

我刚添加可以是相当大的，以行一个验证错误消息，因此现在是：

Label1    Value1    ErrorMessage
Label2    Value2
Label3    Value3
Label4    Value4a   Value4b    Value4c   Value4d

要使设计工作我已经添加了colspan设为具有验证消息，以使得它跨越整个表的单元格。它的工作原理与长度足够小，不会溢出表的错误消息。除此之外，我得到：

Label1    Value1    Veeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeery long ErrorMessage
Label2    Value2
Label3    Value3
Label4    Value4a   Value4b                 Value4c               Value4d

第4行被完全混乱。是否有指定的错误消息，细胞内容物溢出应，而不是在同一列中扩大对其他细胞的表空间，一种方式？也许一些神奇的CSS？

Answer 1

要使文本表外侧延伸，该文本元素或者必须在比表更高的水平（层次），或者它必须被定位，而不相对于表

您可以做这样的事情完成后：

Label1    Value1    <span class="outside">Veeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeery long ErrorMessage</span>
Label2    Value2
Label3    Value3
Label4    Value4a   Value4b                 Value4c               Value4d

和然后给外部类：

.outside
{
    position:absolute;
}

您将不得不做一些进一步的格式得到它在校正位置显示出来。

修改

刚刚意识到，如果你利用何塞的想法以及和跨越，而不是格格式化清理了一下。

table 
{
   table-layout:fixed;
   width:100em;
}

Answer 2

好吧，这里是我的测试解决方案，并在Firefox 3如下：

<style type="text/css">
#error {
    width: inherit;
    overflow: auto;
    padding: 0;
    margin: 0;
}
</style>

<table width="400">
  <tr>
    <td width="100">A</td>
    <td colspan="3" width="300">
      <div id="error">Really long line...</div>
    </td>
  </tr>
  <tr>
    <td>1A</td>
    <td>1B</td>
    <td>1C</td>
    <td>1D</td>
  </tr>
  <tr>
    <td>2A</td>
    <td>2B</td>
    <td>2C</td>
    <td>2D</td>
  </tr>
</table>

Answer 3

这是非常hackish的，但可能是你的情况下工作。如果可能的供应静态宽度为每个内容的细胞。然后，没有宽度增加额外的电池。然后最后一个单元格应扩大它们的设置宽度而使其他。

编辑：基于您的评论 您也可以尝试给错误消息更高的z-index 在CSS。您还需要设置位置，以使这项工作的消息。