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

这是非常hackish但可能适合您的情况。如果可能，为每个内容单元格提供静态宽度。然后添加一个没有宽度的额外单元格。然后最后一个单元格应该扩展，而其他单元格则保持其设定宽度。

编辑：根据您的评论您还可以尝试在css中提供更高z-index的错误消息。您还需要设置消息position以使其正常工作。

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

要使文本扩展到表外，文本元素必须处于比表更高级别（层次结构），或者必须与表无关地定位。

您可以通过执行以下操作来完成后续操作：

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

然后给外面的班级：

.outside
{
    position:absolute;
}

您必须进行一些进一步的格式化才能让它显示在更正位置。

修改

如果你使用何塞的想法并且跨度而不是div，那么只是意识到格式化会有所改善。

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

HTML表中的长行会污染其他行的布局

3 个答案: