質問

私は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?

役に立ちましたか?

解決

のテキストの拡張外にテーブル、テキスト要素のいずれかにより高いレベル(階層)のテーブル、位置づけと関係なく、表に示す。

すで実現できることの後にそのようなもの:

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;
}

他のヒント

[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>

これは非常にhackishが働のまま利用可能です。できれば供給静幅のための各コンテンツの細胞そしてキャリー細胞なしの幅になります。最後の細胞はその拡大はその他でその設定の幅になります。

編集:に基づくコメント また、エラーメッセージをより高い z-index css.が必要となりますので、設定のメッセージ 位置 この作品。

ライセンス: CC-BY-SA帰属
所属していません StackOverflow
scroll top