他の行のレイアウトを汚しているHTMLテーブルの長い行

Question

私はページのレイアウトとして役立つhtmlテーブルを持っています。この表には、このような何かを行く：

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

は私がきた設計作業を行うために：私はちょうどので、今それは、1行目には非常に大きなものとなります検証エラーメッセージを追加

Label1 Value1 
Label2 Value2 
Label3 Value3 
Label4 Value4a Value4b Value4c Value4d 

検証メッセージを持つセルに列全体を追加するように、列全体を追加しました。これは、テーブルをオーバーフローさせないように十分小さな長さのエラーメッセージと共に機能します。それ以外は私が得る：

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

ライン4は完全に台無しです。同じ列の他のセルの領域を拡大するのではなく、エラーメッセージのセルの内容がテーブルをオーバーフローするように指定する方法はありますか？たぶん魔法のCSSですか？

Answer 1

テキストがテーブルの外に広がるようにするには、テキスト要素は、（階層的に）より高いレベルでなければならないのいずれかよりテーブルに関係なく配置する必要があります。

.outside 
{ 
    position:absolute; 
} 

あなたはそれがに表示するために取得するためにさらにいくつかの書式設定を行う必要があります：外部のクラスを

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

そして与える：

あなたのような何かをすることによって、後に達成することができます補正位置。

EDIT：

はちょうどあなたが同様にホセのアイデアを使用して、DIVの代わりにまたがる場合は、フォーマットはビットをクリーンアップが実現しました。

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

Answer 2

これは非常にハックですが、状況に応じて動作する可能性があります。可能であれば、各コンテンツセルの静的な幅を指定します。次に、幅のない余分なセルを追加します。最後のセルは展開され、他のセルは設定された幅になります。

編集：あなたのコメントに基づいて また、エラーメッセージには、より高いz-indexをCSSで入力してみることもできます。この作業を行うには、positionというメッセージも設定する必要があります。

Answer 3

OK]をクリックして、ここで私がテストをしたと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>