Category:Design, CSS

表組毎に表組全体を左寄せ、右寄せ、幅指定を可能にする機能

  • ページ: BugTrack
  • 投稿者: sha
  • 優先順位: 普通
  • 状態: 保留
  • カテゴリー: 本体新機能
  • 投稿日: 2003-07-16 (水) 12:19:18
  • バージョン: 1.4rc3

メッセージ

表組のセルの中は、右寄せ、左寄せ、センタリング等が出来ますが、表組全体では、デフォルトではセンタリングされてしまいます。そこで、表組全体を右寄せ、左寄せ、更には幅指定する機能を要望します。幅の異なる複数の表組を並べたときに、左端がそろっていないと見栄えが悪いので、是非左寄せをしたいと思っております。ただし、ページ毎のレイアウトによっては、幅を揃えたい場合やセンタリングがいい場合もあり、個々の表組で指定できることが望まれます。(質問箱/204から)


  • 書式設定行で TCENTER:80% 等の設定方法は如何でしょうか。参考:なおきの部屋:PukiWikiの雑記/テーブル書式の拡張/書式 -- nao-pon 2003-07-17 (木) 00:19:30
    • 上記のなおきの部屋の方法は、実例をW3C準拠のブラウザで閲覧してもわかるように、左寄せ・右寄せ・センタリングが行なわれてません。W3C非準拠のIE5.5以下及びIE6のW3C非互換モードでのみ有効です。IEだけで表示確認していると気づかない落とし穴。 -- reimy 2003-07-17 (木) 01:15:50
    • また、なおきの部屋では<table>タグにalign属性を指定していますが、XHTML 1.1では使えませんのでPukiWiki 1.4では不可です。HTML 4.01 Transitional及びXHTML 1.0 Transitionalで使用可能ですが、非推奨属性となっています。

      W3C準拠モードでは、<table>の左寄せ・右寄せ・センタリングは<table>要素に対するCSSのmarginプロパティで行なう必要があります。W3C非準拠のIE5.5では、<table>の左寄せ・右寄せ・センタリングは<table>の親ブロック要素に対するCSSのtext-alignで行なう必要があります。 -- reimy 2003-07-17 (木) 01:18:14

    • なおきの部屋はDOCTYPEを出力していないので、IE6は、W3C非互換モードで表示します。したがって、なおきの部屋で<table>の左寄せ・右寄せ・センタリングが正常に表示できるブラウザはIE(5.5以下だけでなく6も含む)だけです。なお、PukiWikiではDOCTYPEを出力しますので、W3C互換ブラウザ(IE6を含む)はW3C互換モードで表示します。-- reimy 2003-07-17 (木) 01:30:16
    • ということで、なおきの部屋での方法での出力では解決しません。テーブルの左寄せ・右寄せについて、W3C非互換モードとW3C互換モードで共通に表示できるようにすることの難しさは質問箱/204にも書いた通りです。 -- reimy 2003-07-17 (木) 01:33:59
  • W3C非互換モードとW3C互換モードの両方で同じように表示されるようにするには次のようなタグを吐く必要があります。 -- reimy 2003-07-17 (木) 02:33:41
    • 左寄せ
      <div class="ie5" style="text-align:left">
        <table class="style_table" style="text-align:center;margin-left:0px;margin-right:auto">
        ....
        </table>
      </div>
    • 右寄せ
      <div class"ie5" style="text-align:right">
        <table class="style_table" style="text-align:center;margin-left:auto;margin-right:0px">
        ....
        </table>
      </div>
    • センタリング
      <div class="ie5" style="text-align:center">
        <table class="style_table" style="margin-left:auto;margin-right:auto">
        ....
        </table>
      </div>

    ただし、左寄せ・右寄せの場合、左端・右端にぴったりくっついてしまうのはレイアウト上、好ましくない場合もあるので0pxではなくリストの$_ul_left_marginのように左右それぞれのマージンのデフォルト値を設定できるようにすべき。

    • reimy さん、詳しい解説ありがとうございます。ちょっと手を入れてみまして、とりあえず Netscape 7 で確認したらOKでした。感謝! -- nao-pon 2003-07-17 (木) 09:25:09
    • 期待してます。 -- sha 2003-07-18 (金) 13:14:34

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2003-07-18 (金) 13:14:34
Site admin: PukiWiki Development Team

PukiWiki 1.5.2+ © 2001-2019 PukiWiki Development Team. Powered by PHP 5.6.40-0+deb8u5. HTML convert time: 0.426 sec.

OSDN