質問箱/5004

質問箱/5004 †

カテゴリ	デザイン・CSS・スキン
サマリ	表組み中のセルとセルの間の枠線をcolspanを使わずに消したい
バージョン	PukiWiki 1.4.7_notb
投稿者	ABS
状態	完了
投稿日	2010-08-19 (木) 23:59:42

↑

質問†

お世話になります。

例として

|70|30|100|c
|>|A&B|C|
|A-1|B-1|C-1|
|A-2|B-2|C-2|

この様な表組みを作ったとして、
AのデータセルとBのデータセルの間の枠線を無くす、もしくは枠線を背景色と同じにする事で
colspanを使わずにあたかも1つのセルに見せかけると言った事は可能でしょうか？
（あくまでも1つのセルに見えるだけでAとBは別々のセルのまま）

イメージ的には

を

この様にしたいのです。

自分でも色々調べてみた結果、質問箱/4243の後半部分をアレンジして
特定の行ではなく特定の列に手動でスタイルを指定できるように改造すれば可能なのかな、
とは思うのですが知識が及ばずこの方法で本当に正しいのか、また正しいとしても
どこをどう改造していいのかがわかりません。

お手数ではございますがご助言を頂けませんでしょうか。
宜しくお願い致します。

↑

回答†

http://hp.vector.co.jp/authors/VA022006/css/tables.html -- 2010-08-20 (金) 00:08:02

CSSの参考情報ありがとうございました。
読み解きつつ試行錯誤してテーブル関連の定義を以下のようにする事で
枠線を消したい2セル間の左側セルにデフォルトのstyle_tdではなくstyle_td2を、
右側セルにstyle_td3を読み込ませる事で想定通りの動きが出来る様になりました。
(ローカルにテーブルを書いたページをhtmlで保存し、直接編集して試しました)
```
.style_table {
	padding:0px;
	margin:auto;
	text-align:left;
	color:inherit;
	border-collapse: collapse;
}
.style_td {
	padding:5px;
	margin:1px;
	color:inherit;
	border:1px solid #C0C0C0;
	background-color:#EEF5FF;
	
}
.style_td2 {
	padding:5px;
	margin:1px;
	color:inherit;
	border:1px solid #C0C0C0;
	border-right:none;
	background-color:#EEF5FF;
}
.style_td3 {
	padding:5px;
	margin:1px;
	color:inherit;
	border:1px solid #C0C0C0;
	border-left:none;
	background-color:#EEF5FF;
}
```
後はpukiwiki上で任意のセルに対してのスタイルの切り替えをできる様にしたいのですが
どの様に手を加えればよいかお分かりになる方いらっしゃいませんでしょうか。
```
|td2:hogehoge|td3:hogehoge|hogehoge|　（記述子「td2:」「td3:」は仮として）
```
こんな感じで書けば個別のセルに一つ一つ指定でき、
(この場合は一番左のセルは<td class="style_td2">、真ん中が<td class="style_td3">、一番右がデフォルトの<td class="style_td">となる)

書式指定で
```
|td2:|td3:||c
```
こう書けば列に対して一気に指定できるといった感じで実装できればとても有難いのですが・・・
宜しくお願いします。 -- ABS 2010-08-20 (金) 20:54:02

CLASS(クラス名)で、class="クラス名"にする改造例 -- 2010-08-20 (金) 23:29:45

lib/convert_html.php （行数は、r1.18 の時の目安）

485行目あたり

 	var $style; // is array('width'=>, 'align'=>...);
+	var $class = '';
 
 	function TableCell($text, $is_template = FALSE)
 	{
 		parent::Element();
 		$this->style = $matches = array();
 
-		while (preg_match('/^(?:(LEFT|CENTER|RIGHT)|(BG)?COLOR\(([#\w]+)\)|SIZE\((\d+)\)):(.*)$/',
+		while (preg_match('/^(?:(LEFT|CENTER|RIGHT)|(BG)?COLOR\(([#\w]+)\)|SIZE\((\d+)\)|CLASS\(([\w]+)\)):(.*)$/',
 		    $text, $matches)) {
 			if ($matches[1]) {
 				$this->style['align'] = 'text-align:' . strtolower($matches[1]) . ';';
-				$text = $matches[5];
+				$text = $matches[6];
 			} else if ($matches[3]) {
 				$name = $matches[2] ? 'background-color' : 'color';
 				$this->style[$name] = $name . ':' . htmlspecialchars($matches[3]) . ';';
-				$text = $matches[5];
+				$text = $matches[6];
 			} else if ($matches[4]) {
 				$this->style['size'] = 'font-size:' . htmlspecialchars($matches[4]) . 'px;';
-				$text = $matches[5];
+				$text = $matches[6];
+			} else if ($matches[5]) {
+				$this->class = htmlspecialchars(strtolower($matches[5]));
+				$text = $matches[6];
 			}
 		}

540行目あたり

 		if ($this->rowspan == 0 || $this->colspan == 0) return '';
 
-		$param = ' class="style_' . $this->tag . '"';
+		if ($this->class == '') {
+			$param = ' class="style_' . $this->tag . '"'; //default
+		} else {
+			$param = ' class="' . $this->class . '"';
+		}
 		if ($this->rowspan > 1)
 			$param .= ' rowspan="' . $this->rowspan . '"';

ご指導有難うございます。
指定された内容の通りにconvert_html.phpを書き換えてみました所、
```
|CLASS(style_td2):hoge1|CLASS(style_td3):hoge2|hoge3|
```
と記載する事でhoge1のセルはstyle_td2、hoge2のセルはstyle_td3、hoge3のセルはstyle_td、
と、pukiwiki上でも自由に切り替えが出来る様になった事を確認致しました。

私のやりたかった事がこれで漸く実現し、大変感謝しております。
また、提示して頂いた改造方法であれば今後更に特殊なセルを作りたい時にもこのまま対応できそうな点も非常に助かります。
私の質問に時間を割いて頂き、本当に有難うございました。 -- ABS 2010-08-21 (土) 02:54:09

PukiWikiについて

Info in English

このサイトについて
- WebTrack
- Web委員日誌

お試し
- PukiWiki 1.5

↑

Developer

質問箱/5004†

質問†

回答†

最新の16件

質問箱/5004 †