初めて自分の家と他人の家が違う、と意識した時

特定のテーブルのみ枠線の色を消したい

解決済

  • 質問者：mfnwicznic
  • 質問日時：
  • 回答数：2件

スタイルシートで他のテーブルの為に色を設定しているけど
特定のテーブルのみ、枠線の色をすべて消したい場合は、
どうすればよろしいでしょうか？

<style type="text/css">
table {border:1px solid red;}
table tr {border:1px solid red;}
table th {border:1px solid red;}
table td {border:1px solid red;}
</style>

<body>

<table border=1 cellspacing=1 cellpadding=1>
<tr><td>a</td><td>b</td></tr>
</table>

<br>

<table border=1 cellspacing=1 cellpadding=1 bordercolor="FFFFFF">
<tr><td>a</td><td>b</td></tr>
</table>

<br>

<table border=0 cellspacing=0 cellpadding=1 bordercolor="FFFFFF">
<tr><td>a</td><td>b</td></tr>
</table>

<br>

<table cellpadding=1 bordercolor="FFFFFF">
<tr><td>a</td><td>b</td></tr>
</table>

<br>

<table bordercolor="FFFFFF">
<tr><td>a</td><td>b</td></tr>
</table>


このソースだと、テーブルならすべて枠線が付いてしまいます。

特定のテーブルのみ赤枠ではなく、白にして色を消したいのですがどうすればいいですか？

「特定のテーブルのみ枠線の色を消したい」の質問画像
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.1ベストアンサー

  • 回答者： ONEONE
  • 回答日時：

まず、同じスタイルを複数の要素に割り当てたい場合は


カンマ区切りで指定できるので

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;とすればよいです。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。

通報する
お礼日時：2014/07/23 19:17

No.2

  • 回答者： ORUKA1951
  • 回答日時：

そのようにセレクタで指定すればよいです。


＞ 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/CSS … )
6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
はスタイルシートを記述するより前に、完璧に理解しておくこと。
　そうしないとスタイルシートは書けないです。

★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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。

通報する
お礼日時：2014/07/23 19:17

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

おすすめ情報

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報