0

ページのレイアウトとして機能するhtmlテーブルがあります（私が知っている悪い習慣です）。この表は次のようになります。

Label1    Value1
Label2    Value2
Label3    Value3
Label4    Value4a   Value4b    Value4c   Value4d

1行目に非常に大きくなる可能性のある検証エラーメッセージを追加したので、次のようになりました。

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

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>
于 2009-04-22T00:51:09.330 に答える
0

これは非常にハックですが、状況によってはうまくいくかもしれません。可能であれば、各コンテンツ セルに静的な幅を指定します。次に、幅のない余分なセルを追加します。最後のセルは拡大され、他のセルは設定された幅のままになります。

編集：あなたのコメントに基づいて、エラーメッセージにcssでより高いz-indexを与えることもできます。これを機能させるには、メッセージの位置も設定する必要があります。

于 2009-04-22T00:32:00.343 に答える
0

テキストをテーブルの外側に拡張するには、テキスト要素がテーブルより (階層的に) 上位レベルにあるか、テーブルと関係なく配置する必要があります。

次のようなことを行うことで、後で達成できます。

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;
}
于 2009-04-22T01:00:59.290 に答える