Category:Design

テーブル幅をパーセントで指定したい。

  • ページ: BugTrack2
  • 投稿者: ch@in?
  • 優先順位: 普通
  • 状態: 提案
  • カテゴリー: 本体新機能
  • 投稿日: 2015-07-30 (木) 18:34:37
  • バージョン:

メッセージ

表組み表現でのテーブルは現在、px単位での指定となっています。 また、それぞれのth,tdタグに対して指定がされています。

しかし、tableタグに対しての指定方法が皆無で、またパーセント指定ができません。

昨今、スマートフォンによる利用者が出てきており、画面幅がPCとくらべて狭いユーザがいます。 そういったユーザーに対して可変的に対応できるパーセント指定は便利なものだと考えています。


サンプル

従来の記述方法 (セル単位のpx)

|500|c
| 幅500pxにしたいテーブルセル |

この提案の記述方法 (テーブル単位の%)

|                             |c50
| 幅50%にしたいテーブル       |

サンプルコード

  • 123行付近 function &Factory_Table()
      function &Factory_Table(&$root, $text)
      {
    -   if (!preg_match('/^\|(.+)\|([hHfFcC]?)$/', $text, $out)) {
    +   if (!preg_match('/^\|(.+)\|(([hHfF]|[cC](\d+)?)?)$/', $text, $out)) {
  • 515行付近 class TableCell extends Element
        if ($is_template && is_numeric($text)) {
          $this->style['width'] = 'width:'.$text.'px;';
        }
    +   if ($is_template && substr($text,-1) == '%' && is_numeric(substr($text,0,-1))) {
    +     $this->style['width'] = 'width:'.$text.';';
    +   }
  • 605行付近 class Table extends Element]
    • 640行付近 public function toString()
          if ($this->types[$nrow] == 'c') {
            $stylerow = &$row;
      -   }
      +   } else if(substr($this->types[$nrow],0,1) == 'c'){
      +     $stylerow = &$row;
      +     $_table_width = (is_numeric(substr($this->type,1))) ? substr($this->type,1) : "";
      +   }

                }
                $string .= $this->wrap($part_string, $part);
            }
      +     $_table_width = $_table_width ? $_table_width.'%' : '';
      -     $string = $this->wrap($string, 'table', ' class="style_table" cellspacing="1" border="0"');
      +     $string = $this->wrap($string, 'table', ' class="style_table" cellspacing="1" border="0" style="width:'.$_table_width.';"');

  • てきとうに関連っぽいのを集めてメモ -- 2015-07-31 (金) 23:13:06
  • なるべく、cssファイルに手を加えない方向でコンバート方だけで対処しようとしたらこうなりました -- ch@in? 2015-08-05 (水) 09:35:47
  • 個人的には逆の意見ですね。Desktop/Tablet/Smartphone/etc...など閲覧環境が多すぎるので、すべての環境で満足する指定は難しいと思います。良かれと思った指定が逆効果になることも多いんじゃないかなって。 -- bee 2016-12-04 (日) 10:57:28
    • width は min-width より優先度が低かったはずなので
      @media screen and max-width(XXpx) {
        .style_table { min-width: 100%; }
      }
      とかすれば、この仕組みが入ってもレスポンシブなスキンは書けるかな…。 -- bee 2016-12-04 (日) 11:18:51


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

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

OSDN