0

我有一个 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？

4

3 回答 3

0

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

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

于 2009-04-22T00:32:00.343 回答
0

好的，这是我在 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>
于 2009-04-22T00:51:09.330 回答
0

要使文本延伸到表格之外，文本元素要么必须位于比表格更高的级别（分层），要么必须与表格无关地定位。

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

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

然后给外面的课：

.outside
{
    position:absolute;
}

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

编辑：

刚刚意识到如果您也使用 Jose 的想法和 span 而不是 div，格式会清理一些。

table 
{
   table-layout:fixed;
   width:100em;
}
于 2009-04-22T01:00:59.290 回答