先日「縦罫線を1本だけ細くしたい」の質問をした者です。
http://oshiete1.goo.ne.jp/qa4883479.html
教えていただいた背景画像を使った方法をやってみたのですが、
colに設定したパディングが効かないため、テキストが外見上の縦罫線の上に乗る可能性に気付いてしまいました。
これは美しくない。
仕方ないので、全部の<td>タグにclass属性をつける覚悟は決めたんですが、
あと一つだけ自分の中で「反則じゃね?」という方法があります。
本来は横5列のテーブルですが、これを9列にして
2,4,6,8列目の幅を1~2ピクセルに、背景色を黒にして
視覚上、罫線に見せるという方法です。
これって、やっぱり反則でしょうか?
No.6ベストアンサー
- 回答日時:
まっとうな記述に古いIEだけが対応してないくらいで、そこまで非
論理的な記述に走るってのは、ちょっと引きますね。全くスマート
じゃぁありません。そもそもクラスを指定する方が無駄なカラムを
何列も増やすより楽なように感じますが。
ちなみに前回の私の回答は、IE8対応確認済みです。
No.4
- 回答日時:
セルを線代わりにするのはテーブルレイアウトの方法ですので、Web標準的には反則ですね。
それ以上の事は、テーブルレイアウトを使わない主義かどうかだと思います。
> colに設定したパディングが効かないため、
それはtdに指定する物では?
colのborderはIE(IE8含む)は未対応です。
http://msdn.microsoft.com/en-us/library/ms535225 …
(col要素の対応styleの項目にborderが書かれていません)
colは古くからあるタグですが、ブラウザが対応したのは比較的最近だと思います。
一部だけ細くする、というのがうまくいきませんでしたが、
2列目だけ線を引く場合は、
IE7以上、その他のブラウザはおおむね対応していると思いますが、こんな感じで出来ます。
td{border: 0 none;}
td+td{border-right:1px solid blue;}
td+td+td{border-right:0 none;}
ご参考まで。
IE6対応はtdにclassを指定するしかないかな、と思います。
No.3
- 回答日時:
CSS でデザインでする前は良くやっていました。
今は、border で何とかすると思います。
正直ピンポイントで質問されても、具体的にどうされたいのか解らないので何とも言えません。反則の定義も解らないし・・・。
参考URL:http://critical.s6.xrea.com/web/border.shtml
No.1
- 回答日時:
> 2,4,6,8列目の幅を1~2ピクセルに、背景色を黒にして視覚上、罫線に見せるという方法です。
> これって、やっぱり反則でしょうか?
「反則」の定義はわかりかねますが、つまり見かけ上のレイアウトの為だけに存在する空のセルの列をマークアップする、という事ですよね。
そういう「無意味さ」ではNGでしょう。それでもその方法を取るか取らないかは質問者様の自由ですが。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Word(ワード) Word 段落罫線の上下のスペースを広げるには 3 2023/08/04 10:52
- Excel(エクセル) vba セルの罫線について教えてください 2 2022/12/28 17:14
- その他(IT・Webサービス) word2013 で罫線 便箋のように罫線を沢山書きたいのですが、調べても、1本しか引けません。 い 3 2022/06/26 19:36
- JavaScript 階層別の組織図の自動作成について 1 2022/10/26 13:42
- Word(ワード) Wordで作った「表の罫線を部分的に削除したい」 4 2023/07/24 07:00
- Word(ワード) Officeのワードで段落の間に縦線を入れる方法。 1 2022/11/25 19:07
- Word(ワード) ワードでの罫線の改行につい 4 2022/10/24 11:05
- Excel(エクセル) Excelのマクロを教えていただけないでしょうか? 1 2023/07/06 19:56
- PDF 「PDF文書を簡単にWordで編集する方法」と 罫線が 図形で出力されるのは? 6 2022/06/14 06:51
- その他(Microsoft Office) 選択行の列範囲に二重線を引く 3 2022/06/08 12:21
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
tableにul,または,olを入れられ...
-
逆L字の表(table)組み
-
cssで、表示されるテキストによ...
-
トーナメント表の製作
-
テーブル<TD>内に均等割付で表示
-
テーブルのセルに画像をピッタ...
-
テーブルを挿入すると他のCSSと...
-
テーブル結合 縦横両方するには?
-
テーブルの行を折りたたみたい...
-
テーブルの行の高さを指定する...
-
テーブルの上に空行が入る・・...
-
表組の均等割り付け
-
ウィキペディアのリンクの仕組...
-
テーブルの枠自体を折り曲げる
-
tableタグとformタグの組み合わせ
-
TABLEのセルの中の文字を行単位...
-
テーブルとテーブルの間隔について
-
テーブルタグの中にdivを含めて...
-
<li>と<table>タグについて
-
TDタグ内での均等割付の仕方
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
テーブルの行を折りたたみたい...
-
tableにul,または,olを入れられ...
-
テーブルの任意の列を非表示に...
-
TRタグの余白をcssで設定するには
-
文字列が入っているtdを削除せ...
-
テーブルのヘッダとボディの幅...
-
テーブルの行の高さを指定する...
-
cssで、表示されるテキストによ...
-
テーブルのセルに画像をピッタ...
-
HTML <td></td>タグ セル内余...
-
ホームページ 表の上の余白を...
-
テーブルの表示がずれます
-
スタイルシートで colspan=3と...
-
テーブルの上に空行が入る・・...
-
テーブルタグのセルの幅の一部...
-
表の1列だけをCSSを使って右揃...
-
逆L字の表(table)組み
-
tableでcolspanを使うと次行以...
-
HTMLのテーブルで桁をそろ...
-
テーブルのセルにアンカー
おすすめ情報