- ベストアンサー
特定のテーブルのみ枠線の色を消す方法
- 特定のテーブルのみ枠線の色をすべて消す方法について教えてください。
- スタイルシートで他のテーブルの枠線の色を設定しているが、特定のテーブルのみ枠線の色を消したい。
- テーブルの枠線の色を消す方法について教えてください。
- mfnwicznic
- お礼率82% (38/46)
- CSS
- 回答数2
- ありがとう数12
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
まず、同じスタイルを複数の要素に割り当てたい場合は カンマ区切りで指定できるので table, table tr, table th, table td {border:1px solid red;} のように書けます。 枠を消したい場合はそのtableにid(たとえばnoborderとします)を付与して table#noborder, table#noborder tr, table#noborder th, table#noborder td {border:none;} とすればよいです。白線にしたい場合はwhite;とでもしてください。 透明な線にしたい場合はborder-color:transparent;とすればよいです。
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
そのようにセレクタで指定すればよいです。 ＞ border=0 cellspacing=0 cellpadding=1 bordercolor="FFFFFF" tableには、非推奨なcellspacing、cellpadding、bordercolorあるのに、必須なsummary属性がない。 単純にtable[summary="test1"]{}でよいですし。summaryが同じでも文書構造からセレクタ指定すればすむ事です。一般的な設定をしていても、詳細度を高くすれば上書きしてくれますよ。 5 セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/selector.html ) 6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cascade.html ) はスタイルシートを記述するより前に、完璧に理解しておくこと。 そうしないとスタイルシートは書けないです。 ★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html )のDATA入力で で検証済みのHTML4.01+CSS2.1です。 1) まず率直にHTMLで文書構造だけ書く 2) 文法チェック後、スタイルシートを文書構造に基づいて書く ★タブは＿に置換してあるので戻す。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- html,body{margin:0;padding:0;} h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;} p{text-indent:1em;} div.header,div.section,div.footer{width:90%;min-width:630px;max-width:900px;margin:0 auto;padding:5px;} table{border-collapse:collapse;} table tbody th,table tbody td{background-color:red;padding:0.5em 1em;} div.figure{width: 20em;font-size:0.8em;width:auto;float:right;} table tr+tr+tr td{background-color:yellow;} div.figure table tr+tr td{background-color:lime;} div.figure table tr+tr+tr td{background-color:orange;} div.figure table tr+tr+tr+tr td{background-color:fuchsia;} table tr+tr+tr+tr td+td{background-color:silver;} table[summary="コーヒー消費量2"]{font-size:1.4em;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>本文はsection</p> ＿＿<table border="1" summary="コーヒー消費量1"> ＿＿＿＿<caption>各評議員のコーヒー消費量</caption> ＿＿＿<tbody> ＿＿＿＿<tr> ＿＿＿＿＿<th abbr="member">評議員</th><th abbr="cup">杯</th><th abbr="kind">種類</th><th abbr="sugger">砂糖は?</th> ＿＿＿＿</tr> ＿＿＿＿<tr> ＿＿＿＿＿<td>T. Sexton</td><td>10</td><td>エスプレッソ</td><td>入れない</td> ＿＿＿＿</tr> ＿＿＿＿<tr> ＿＿＿＿＿<td>J. Dinnen</td><td>5</td><td>カフェイン抜き</td><td>入れる</td> ＿＿＿＿</tr> ＿＿＿＿<tr> ＿＿＿＿＿<td>A. Soria</td><td colspan="3"><em>データなし</em></td> ＿＿＿＿</tr> ＿＿＿</tbody> ＿＿</table> ＿＿<p> ＿＿＿また（他から独立して参照されるなど）挿絵的な意味でtableが使われるときがあるでしょう。 ＿＿</p> ＿＿<div class="figure"> ＿＿＿<div class="figcaption">各評議員のコーヒー消費量</div> ＿＿＿<table border="1" summary="コーヒー消費量1"> ＿＿＿＿<tbody> ＿＿＿＿＿<tr> ＿＿＿＿＿＿<th abbr="member">評議員</th><th abbr="cup">杯</th><th abbr="kind">種類</th><th abbr="sugger">砂糖は?</th> ＿＿＿＿＿</tr> ＿＿＿＿＿<tr> ＿＿＿＿＿＿<td>T. Sexton</td><td>10</td><td>エスプレッソ</td><td>入れない</td> ＿＿＿＿＿</tr> ＿＿＿＿＿<tr> ＿＿＿＿＿＿<td>J. Dinnen</td><td>5</td><td>カフェイン抜き</td><td>入れる</td> ＿＿＿＿＿</tr> ＿＿＿＿＿<tr> ＿＿＿＿＿＿<td>A. Soria</td><td colspan="3"><em>データなし</em></td> ＿＿＿＿＿</tr> ＿＿＿＿</tbody> ＿＿＿</table> ＿＿</div> ＿＿<table border="1" summary="コーヒー消費量2"> ＿＿＿＿<caption>各評議員のコーヒー消費量</caption> ＿＿＿<tbody> ＿＿＿＿<tr> ＿＿＿＿＿<th abbr="member">評議員</th><th abbr="cup">杯</th><th abbr="kind">種類</th><th abbr="sugger">砂糖は?</th> ＿＿＿＿</tr> ＿＿＿＿<tr> ＿＿＿＿＿<td>T. Sexton</td><td>10</td><td>エスプレッソ</td><td>入れない</td> ＿＿＿＿</tr> ＿＿＿＿<tr> ＿＿＿＿＿<td>J. Dinnen</td><td>5</td><td>カフェイン抜き</td><td>入れる</td> ＿＿＿＿</tr> ＿＿＿＿<tr> ＿＿＿＿＿<td>A. Soria</td><td colspan="3"><em>データなし</em></td> ＿＿＿＿</tr> ＿＿＿</tbody> ＿＿</table> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2013-03-03</dd> ＿＿</dl> ＿</div> </body> </html>
お礼
ありがとうございます。
お礼
ありがとうございます。