スタイルシートで他のテーブルの為に色を設定しているけど
特定のテーブルのみ、枠線の色をすべて消したい場合は、
どうすればよろしいでしょうか?
<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>
このソースだと、テーブルならすべて枠線が付いてしまいます。
特定のテーブルのみ赤枠ではなく、白にして色を消したいのですがどうすればいいですか?
No.1ベストアンサー
- 回答日時:
まず、同じスタイルを複数の要素に割り当てたい場合は
カンマ区切りで指定できるので
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;とすればよいです。
No.2
- 回答日時:
そのようにセレクタで指定すればよいです。
> 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>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- PHP htmlで複数の個数入力欄を表示させるには 1 2022/09/20 03:11
- HTML・CSS 【CSS】:hasで可能? imgを含むtr要素を選択したい 1 2022/11/17 14:36
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- JavaScript 追加ボタンを押した際に ok ボタンを押した場合のみ入力値が追記されるようにしたいです 6 2022/05/29 09:57
- MySQL SQL任意に並び替えをしたい 2 2023/08/28 10:47
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
tableにul,または,olを入れられ...
-
テーブルの表示がずれます
-
不要な余白を削除する方法を教...
-
テーブルのヘッダとボディの幅...
-
TRタグの余白をcssで設定するには
-
テーブル(表)を2つ横に並べて...
-
テーブルの外側の線を消す
-
テーブルの任意の列を非表示に...
-
逆L字の表(table)組み
-
EXCELからhtmlへの変換で罫線が...
-
テーブルの枠が2重線になるので
-
[CSS] tableの行の間隔をあける
-
テーブルの行を折りたたみたい...
-
テーブルタグのセルの幅の一部...
-
テーブルの行の高さを指定する...
-
HTML <td></td>タグ セル内余...
-
EXCELの表にTABLEタグをテキス...
-
<table>を複数使用するレイアウ...
-
tableでcolspanを使うと次行以...
-
EXCELのセル内にHTMLタグを含む...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
TRタグの余白をcssで設定するには
-
tableにul,または,olを入れられ...
-
テーブルの任意の列を非表示に...
-
テーブルのヘッダとボディの幅...
-
cssで、表示されるテキストによ...
-
HTML <td></td>タグ セル内余...
-
文字列が入っているtdを削除せ...
-
テーブルのセルに画像をピッタ...
-
テーブルの行を折りたたみたい...
-
テーブルの行の高さを指定する...
-
テーブルの表示がずれます
-
テーブルタグのセルの幅の一部...
-
中に<table></table>が使えるア...
-
逆L字の表(table)組み
-
ホームページ 表の上の余白を...
-
表の中の列の順番を入れ替える...
-
EXCELからhtmlへの変換で罫線が...
-
tableでcolspanを使うと次行以...
-
表の1列だけをCSSを使って右揃...
-
文字の中央そろえを一括で指定...
おすすめ情報