グッドデザイン賞を受賞したウォーターサーバー >>

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

<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>


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

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

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

このQ&Aに関連する最新のQ&A

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

ありがとうございます。

お礼日時:2014/07/23 19:17

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


> 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に関連する人気のQ&A

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

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qテーブルの行の高さを指定する時全てのtdタグに?

スタイルシートでテーブルの行の高さを指定する時は、
全てのtdタグにスタイルシートを指定するべきか、
1つだけ(一番左だけ)指定すればいいのかわからないので押してください。


全てのtdタグに指定しても、一つのtdタグに指定しても、結局はその行の高さは指定した高さになります。

コードを書く上でどちらが適切か教えてください。
--------------------------------------------------


<style type="text/css">

td.test {height: 50px;}

</style>

<body>

1の例<br>(2列ともclass="test"を入れた)<br>

<table border=1>
<tr><td class="test">1</td><td class="test">2</td></tr>
<tr><td class="test">3</td><td class="test">4</td></tr>
</table>

<br><br>

2の例<br>(一番左の列だけclass="test"をいれた)<br>

<table border=1>
<tr><td class="test">1</td><td>2</td></tr>
<tr><td class="test">3</td><td>4</td></tr>
</table>

<br><br>

3の例<br>(スタイルシートは何も指定していない)<br>

<table border=1>
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>

スタイルシートでテーブルの行の高さを指定する時は、
全てのtdタグにスタイルシートを指定するべきか、
1つだけ(一番左だけ)指定すればいいのかわからないので押してください。


全てのtdタグに指定しても、一つのtdタグに指定しても、結局はその行の高さは指定した高さになります。

コードを書く上でどちらが適切か教えてください。
--------------------------------------------------


<style type="text/css">

td.test {height: 50px;}

</style>

<body>

1の例<br>(2列ともclass="test"を入れた...続きを読む

Aベストアンサー

テーブルの行の高さ、なので <tr> タグに指定するのが素直でしょうか。

<style>
table tr { height:1em; } /* 全ての行に適用 */
table tr.test { height:3em; } /* 特定の行のみ適用 */
</style>

<table border>
<tbody>
<tr> <td> 1 <td> 2
<tr> <td> 3 <td> 4
<tr class=test> <td> 5 <td> 6
</table>

Qテーブルの内側の特定の線だけ消したい

1つのテーブル内の、横線を消したいのですが、二本目と四本目だけなど、特定の消し方はあるのでしょうか?

色々と調べたのですが、横線を一括で消す方法しか載っていないので。

Aベストアンサー

適当なセルで
style="border-style: 上 右 下 左"
と設定します。
それぞれには、
線を引く場合
solid
線を引かない場合
none
を書きます

Qテーブルでセルの枠線を消す(CSS)

表をつくり、下記の方法でセルの枠線を消しています。

<html>
<head>
<style type="text/css">
<!--
td{border-color:black;}
-->
</style>
</head>

<table border>
<colgroup span=2 width=50></colgroup>
<tr>
<td>a</td>
<td style={border-style:none;}>aa</td>
</tr>
<tr>
<td>b</td>
<td>bb</td>
</tr>
</table>
</html>

セルのタグ<td>内にスタイルシートを設定するだけで消せると思ったのですがうまくいかず、
先頭で設定するスタイルシートで<td>のボーダー設定をすると何故か消す事が出来ました。

なぜ<td>内の設定だけで消えないのか理由が分かる方、説明お願いします。

Aベストアンサー

こちらの環境(WinMe)のIE6では、質問文中のソースの、head内のスタイル要素を除いた分のソースで、aaという文字が入るセルの内側の境界線は消えるようです。 style要素の「td{border-color:black;}」この部分が無くてもです。
今一度、このスタイルシートを削って、再度表示を検証してみてはいかがでしょうか?

また、#1でも指摘されていますが、

<td style={border-style:none;}>aa</td>

この記述は誤りです。

<td style="border-style:none;">aa</td>

に直す必要があるでしょう。 IEでは拡大解釈して{}でスタイルシート部分を括っても問題なく解釈してくれますが、Netscapeなどでは不正な書式としてこの部分の指定が完全に無視される可能性があります(こちらの環境のNetscape 7.1では無視されました)。
head内のstyle要素では「セレクタ {プロパティ:設定値;}」という形で記述しますが、タグ内のstyle属性としては「style="プロパティ:設定値;"」と記述するのが正当でしょう。
また、タグ内の属性については、その値はすべて引用符で括ることが推奨されていますので、できる限り""で括るようにした方が無難です。 場合によっては、ブラウザがその属性を正常に解釈しなくなることもあります。 スタイルシートをタグ内で直接設定する場合や、スクリプトをイベントハンドラに記述する場合には特に、注意が必要と思います。

参考になれば。

こちらの環境(WinMe)のIE6では、質問文中のソースの、head内のスタイル要素を除いた分のソースで、aaという文字が入るセルの内側の境界線は消えるようです。 style要素の「td{border-color:black;}」この部分が無くてもです。
今一度、このスタイルシートを削って、再度表示を検証してみてはいかがでしょうか?

また、#1でも指摘されていますが、

<td style={border-style:none;}>aa</td>

この記述は誤りです。

<td style="border-style:none;">aa</td>

に直す必要があるでしょう。 IEでは拡大解釈...続きを読む

Qテーブル内の一部のみ線を変更する方法ってありますか?

いつもお世話になっております。どなたか教えて下さい。
無理なら無理で結構ですので不可能だと回答下さい。

あるテーブル内の一部のみ線を点線にしたり、線幅を細くする方法があれば教えてほしいのですが・・・可能でしょうか?

イメージはエクセルのように一部の罫線だけを変更したいのです。宜しく御願いします。

1つのテーブルで実現不能ならば、複数のテーブルを自由に結合する方法とかないでしょうか?

むちゃくちゃ言って申し訳ありませんが、どなたか救いの手をお願いします。

ちなみにブラウザはIE5.0か6.0だと思います。

Aベストアンサー

スタイルシートを用いることで可能です。
以下の例ではタグに直接style属性を埋め込んでいますが、
先にstyle指定をしておくと楽かもしれません。
<table border="1" bordercolor="black">
<tr>
<td style="border-top-style:dashed;border-left:3px solid red;border-bottom-width:2px;border-right-color:blue;">あああ</td>
</tr>
</table>
詳しくは、スタイルシート、CSSなどで調べてみてください。

Qテーブルの一部のセルだけ罫線を消したい

テーブルを作成していて、一つのセルだけ罫線を消したいのですが、可能でしょうか?

今回は一番下のセルの横と下を消したいのです。
具体的に言うと、フォームを作っていて一番下の送信ボタンが入るセルの罫線を消したいんです。

簡単な方法、あるいはタグでどう書けばよいのでしょうか?
何ぶん初心者のため、わかりやすく教えていただけるとうれしいです。

よろしくお願いします。

Aベストアンサー

<td style="border:0"><input></td>

多分これで消えるんじゃないかと思うけどどうだろう
ただ、tableタグに対してborder表示をしているならまずそれも消さないとだめだよ

そういう場合は
<form>
 <table>
 </table>
 <input>
</form>
こんなくくり方をしてtableの枠外にしないとならないね


人気Q&Aランキング