#author("2016-12-04T11:18:51+09:00","","")
#author("2016-12-04T11:21:19+09:00","","")
RIGHT:&size(12){Category:[[Design>:Design]]};
* テーブル幅をパーセントで指定したい。 [#gdf109d5]
- ページ: [[BugTrack2]]
- 投稿者: [[ch@in]]
- 優先順位: 普通
- 状態: 提案
- カテゴリー: 本体新機能
- 投稿日: 2015-07-30 (木) 18:34:37
- バージョン:
** メッセージ [#h04de4cb]
表組み表現でのテーブルは現在、px単位での指定となっています。
また、それぞれのth,tdタグに対して指定がされています。
しかし、tableタグに対しての指定方法が皆無で、またパーセント指定ができません。
昨今、スマートフォンによる利用者が出てきており、画面幅がPCとくらべて狭いユーザがいます。
そういったユーザーに対して可変的に対応できるパーセント指定は便利なものだと考えています。
--------
*サンプル [#ve12a909]
従来の記述方法 (セル単位のpx)
|500|c
| 幅500pxにしたいテーブルセル |
この提案の記述方法 (テーブル単位の%)
| |c50
| 幅50%にしたいテーブル |
*サンプルコード [#xac84c47]
- 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.';"');
--------
- てきとうに関連っぽいのを集めてメモ -- &new{2015-07-31 (金) 23:13:06};
-- テーブル（表組み）に関する改造ネタ
--- table用の書式指定行で、[[CSS]]に定義してある別のclass名を指定したい: [[official:質問箱3/510]] → [[teanan:自作プラグイン/table_color]]
--- 自動や手動で行の色を変更する（テーブルの行末にc1 など、一部の書式がこのページの改造と被ってる模様）: [[official:質問箱4/243]]
--- 上記の質問箱3/510＋質問箱4/243: [[official:質問箱4/483]]
--- table用の書式指定行で、summaryを指定したい: [[BugTrack/522]]
-- 各セルに関する改造ネタ
--- NOWRAP: の書式を追加: [[PukiWiki/1.4/ちょっと便利に/表組みでnowrapを指定する]]
--- TOP:, MIDDLE:, BOTTOM: の書式を追加: [[official:質問箱4/540]]
--- 列揃えで書けるようになって欲しい: [[BugTrack2/19]]
-- 抜けてそうなので、まとめ追記。[[BugTrack2/34]]: ヘッダセル<th>にabbr属性を指定したい -- &new{2016-03-22 (火) 22:00:18};
- なるべく、cssファイルに手を加えない方向でコンバート方だけで対処しようとしたらこうなりました -- [[ch@in]] &new{2015-08-05 (水) 09:35:47};
- 個人的には逆の意見ですね。Desktop/Tablet/Smartphone/etc...など閲覧環境が多すぎるので、すべての環境で満足する指定は難しいと思います。良かれと思った指定が逆効果になることも多いんじゃないかなって。 -- [[bee]] &new{2016-12-04 (日) 10:57:28};
-- width は min-width で上書きできるはずなので、レスポンシブなスキンでは @media screen and max-width(XXpx) { .style_table { min-width: 100%; }} などで上書きすることになりますね。 -- [[bee]] &new{2016-12-04 (日) 11:18:51};
-- width は min-width より優先度が低かったはずなので
@media screen and max-width(XXpx) {
.style_table { min-width: 100%; }
}
とかすれば、この仕組みが入ってもレスポンシブなスキンは書けるかな…。 -- [[bee]] &new{2016-12-04 (日) 11:18:51};
#comment
![[PukiWiki]](image/pukiwiki-dev.png "[PukiWiki]")
