• ベストアンサー
  • すぐに回答を!

CSSのテーブルについて教えて下さい。

  • 質問No.8176571
  • 閲覧数226
  • ありがとう数0
  • 気になる数0
  • 回答数5
  • コメント数0

お礼率 20% (2/10)

テーブルなのですがh1が適用されません。
又表の枠線が黒になりません。
また(休診)を赤にしたいのですが表示されません。

どこをどう直したらいいのか教えて下さい。
お願いします。

h1 {
margin: 1em 0;
padding: 0.3em;
border: 1px silver solid;
background: url(../image/subpage_h2_bg.gif) bottom repeat-x;
color: gray;
font-weight: bold;
font-size: large;

}

/*hyou*/
caption{
color: #996666;
padding-bottom: 14px;
text-align: center;
}

table{
width: 800px;
border: solid 2px ;
border-collapse: collapse;
}


th,td {
padding: 5px;
border: solid 1px #000000;
text-align:center;
}

th {
background-color:silver;
font-weight: bold;
}

td.col01{
font-weight: bold;
background-color:silver;
}

em {
color: red;
font-weight: bold;
}



/* テーブル列幅指定 */
.cola {
width:100px;
}


.col01{
width: 100px;
}

.col02{
width: 70px;
}

.col03{
width: 70px;
}

.col04{
width: 70px;
}

.col05{
width: 70px;
}

.clo06{
width: 70px;
}

.style1 {margin-left:1em;
}


HTML
<h1>外来診療のご案内</h1>
<table>
<caption>外来診療 予定表</caption>
<tr>
<th class="a">診察科</th>
<th class="b">月</th>
<th class="c">火</th>
<th class="d">水</th>
<th class="e">木</th>
<th class="f">金</th>
<th class="g">土</th>
<th class="h">日</th>
</tr>
<tr>
<th class="col01">一般歯科</th>
<td class="col02" rowspan="4"><em>休診</em></td>
<td class="col03" colspan="5">◯</td>
<td class="col04" rowspan="4"><em>休診</em></td>
</tr>
<tr>
<th class="col01">小児歯科</th>
<td class="col02">◯</td>
<td class="col03">&nbsp;</td>
<td class="col04">◯</td>
<td class="col05">&nbsp;</td>
<td class="col06">◯</td>
</tr>
<tr>
<th class="col01">歯列矯正</th>
<td class="col02">&nbsp;</td>
<td class="col03">◯</td>
<td class="col04">&nbsp;</td>
<td class="col05">◯</td>
<td class="col06">&nbsp;</td>
</tr>
<tr>
<th class="col01">審美歯科</th>
<td class="col02">&nbsp;</td>
<td class="col03">◯</td>
<td class="col04">&nbsp;</td>
<td class="col05">&nbsp;</td>
<td class="col06">◯</td>
</tr>
</table>

質問者が選んだベストアンサー

  • 回答No.2
  • ベストアンサー

ベストアンサー率 57% (1008/1745)

CSSの設置方法で、どこかでミスしているだけでしょう。
CSSが効かない事はありえないので、単純なミスしか考えられません。

1、
CSSファイルが適応されていない。
例えば、
<link rel="stylesheet" href="sample.css" type="text/css">
このsample.cssの部分の名前と、実際のファイル名の相違・・・
または、表記ミスなど。
2、
CSSへのパス(保存場所)のミス
3、
キャッシュが効いている・・・ リロードやスーパーリロード!
4、
#1さんが云う、DOCTYPEは無関係。どっちでも良い。

CSSの内容自体にミスは無いようです。下記ソースでお試しを。

<html>
<head>
<style type="text/css"><!--
h1 {
margin: 1em 0;
padding: 0.3em;
border: 1px silver solid;
background: url(../image/subpage_h2_bg.gif) bottom repeat-x;
color: gray;
font-size: large;
}
caption{
color: #996666;
padding-bottom: 14px;
}
table{
border: solid 2px;
border-collapse: collapse;
text-align: center;
}
th,td {
width: 70px;
padding: 5px;
border: solid 1px #000000;
}
th { background-color:silver;}
em {
color: red;
font-weight: bold;
}
th.col01{
width: 100px;
}
--></style>
</head>
<body><div>
<h1>外来診療のご案内</h1>
<table>
<caption>外来診療 予定表</caption>
<tr><th class="col01">診察科</th><th>月</th><th>火</th><th>水</th><th>木</th><th>金</th><th>土</th><th>日</th></tr>
<tr><th>一般歯科</th><td rowspan="4"><em>休診</em></td><td colspan="5">◯</td><td rowspan="4"><em>休診</em></td></tr>
<tr><th>小児歯科</th><td>◯</td><td>&nbsp;</td><td>◯</td><td>&nbsp;</td><td>◯</td></tr>
<tr><th>歯列矯正</th><td>&nbsp;</td><td>◯</td><td>&nbsp;</td><td>◯</td><td>&nbsp;</td></tr>
<tr><th>審美歯科</th><td>&nbsp;</td><td>◯</td><td>&nbsp;</td><td>&nbsp;</td><td>◯</td></tr>
</table>
<p>border: solid 2px;にborder-colorを設定しないとデフォ色になる</p>
</div></body>
</html>

その他の回答 (全4件)

  • 回答No.5

ベストアンサー率 45% (5062/11035)

table[summary="schedule"]{
line-height:2em;
}
line-heightを加えておいたほうがよいかも。td,thにpaddingでも。
  • 回答No.4

ベストアンサー率 45% (5062/11035)

いや、HTMLもスタイルシートもとってもまずい。
 スタイルシートを利用する一番の目的は文書構造を記述するHTMとプレゼンテーションを指定するスタイルシートの役割分担ですよ。そのHTMLはプレゼンテーション目的で書かれているから意味不明ですし、スタイルシートを文書構造を利用できないから複雑なものになってしまう。
 スタイルシートに誤りはないので、他の部分でより詳細度が高い設定があり、上書きされているのでしょう。(ひょっとしてリセットスタイルを書いているとか)

★class名に文書構造上意味のないものは書かない!!
★Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html# )
 のDATA入力でチェック済みのHTML4.01strict+CSS2.1です。
★スマホでも利用できるように幅は指定してありません。(ウィンドウ幅を縮めて確認)
★セレクタやカスケーディングと言う大事な部分が身についていないようです。
 それを知らないとカスケーディングスタイルシートを使えません。
 ⇒セレクタ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html )
 ⇒値の割り当て、カスケード処理、継承( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html )
★タブは_に置換してあるので戻す。


<!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">
<!--
div.header h1{
margin: 1em 0;
padding: 0.3em;
border: 1px silver solid;
background: url(../image/subpage_h2_bg.gif) bottom repeat-x;
color: gray;
}
table[summary="schedule"]{
width:80%; max-width:800px;
margin:0 auto;
border: solid 2px black;
border-collapse: collapse;
text-align:center;/* 継承されるプロパティ */
}
table[summary="schedule"] th,table[summary="schedule"] td{
border: solid 1px black;
}
table[summary="schedule"] th{background-color:silver;}
table[summary="schedule"] em{color:red;font-weight: bold;font-style:normal;}
-->
_</style>
</head>
<body>
_<div class="header">
__<h1>外来診療のご案内</h1>
_</div>
_<div class="section">
__<table summary="schedule" border="1"><!-- summaryは必須です。 -->
___<caption>外来診療 予定表</caption>
___<tbody><!-- 必須です。 -->
____<tr>
_____<td>診察科</td>
_____<th abbr="Mon">月</th><!-- thにabbrは必須です。 -->
_____<th abbr="Tue">火</th>
_____<th abbr="Wed">水</th>
_____<th abbr="Thu">木</th>
_____<th abbr="Fri">金</th>
_____<th abbr="Sat">土</th>
_____<th abbr="Sun">日</th>
____</tr>
____<tr>
_____<th abbr="generalPractice">一般歯科</th>
_____<td rowspan="4"><em>休診</em></td>
_____<td colspan="5">◯</td>
_____<td rowspan="4"><em>休診</em></td>
____</tr>
____<tr>
_____<th abbr="pedodontics">小児歯科</th>
_____<td>◯</td>
_____<td></td>
_____<td>◯</td>
_____<td></td>
_____<td>◯</td>
____</tr>
____<tr>
_____<th abbr="orthodontics">歯列矯正</th>
_____<td></td>
_____<td>◯</td>
_____<td></td>
_____<td>◯</td>
_____<td></td>
____</tr>
____<tr>
_____<th abbr="cosmeticDentistry">審美歯科</th>
_____<td></td>
_____<td>◯</td>
_____<td></td>
_____<td></td>
_____<td>◯</td>
____</tr>
__</table>
_</div>
_<div class="footer">
__<h2>文書情報</h2>
__<dl class="documentHistry">
___<dt id="FIRST-PUBLISHED">First Published</dt>
___<dd>2012-08-10</dd>
__</dl>
__<address>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
_</div>
</body>
</html>
  • 回答No.3

ベストアンサー率 55% (305/551)

すごく細かい指定のcssですね?
Cssは継承するのをご存知でしょうか?おそらく他の親要素の指定が有効で、tableにした指定が詳細度で負けているので、反映されないのでは?と推察します。拝見したcssは詳細度昔の言いかたで言うと、1~11点でかなり弱い指定となります。今の言い方だと(0,0,0,1)~(0,0,1,1)。

Cssは指定する為に、すべてclassをつけるという物ではありません。親要素の継承やセレクタをきちんと理解して使う事により、classを有効につけ、簡単にhtmlやCssの管理をすることができます。

拝見したソースがそのページのすべてだとすると、私ならこう組みます。そのまま、コピペして、このソースのみの新しい、テストhtmlファイルを作り表示してみてください。
<html>
<head>
<style>
h1 {
margin: 1em 0;
padding: 0.3em;
border: 1px silver solid;
background: url(../image/subpage_h2_bg.gif) bottom repeat-x;
color: gray;
font-weight: bold;
font-size: large;

}

/*hyou*/
caption{
color: #996666;
padding-bottom: 14px;
text-align: center;
}

table{
width: 800px;
border: solid 2px ;
border-collapse: collapse;
table-layout: fixed;
}

tbody th{width:100px;}
th,td {
border: solid 1px #000000;
text-align:center;
}

th {
background-color:silver;
font-weight: bold;
}

em {
color: red;
font-weight: bold;
}

</style>
</head>
<body>
<div class="sofubo">/*これ、本来は不要だけど、後述の為*/
<div class="oya" id="oya">/*これ、本来は不要だけど、後述の為*/
<h1>外来診療のご案内</h1>
<table>
<caption>外来診療 予定表</caption>
<thead>
<tr>
<th>診察科</th>
<th>月</th>
<th>火</th>
<th>水</th>
<th>木</th>
<th>金</th>
<th>土</th>
<th>日</th>
</tr>
</thead>
<tbody>
<tr>
<th>一般歯科</th>
<td rowspan="4"><em>休診</em></td>
<td colspan="5">◯</td>
<td rowspan="4"><em>休診</em></td>
</tr>
<tr>
<th>小児歯科</th>
<td>◯</td>
<td>&nbsp;</td>
<td>◯</td>
<td>&nbsp;</td>
<td>◯</td>
</tr>
<tr>
<th>歯列矯正</th>
<td>&nbsp;</td>
<td>◯</td>
<td>&nbsp;</td>
<td>◯</td>
<td>&nbsp;</td>
</tr>
<tr>
<th>審美歯科</th>
<td>&nbsp;</td>
<td>◯</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>◯</td>
</tr>
</tbody>
</table>
</div></div>/*これ、本来は不要だけど、後述の為*/
</body>
</html>

さて、本題ですが、他にCssを指定していませんか?その表の親要素、や親の親要素おそらくdivがhtmlにあり、その要素に、idや、複数のclass指定がありませんか?そうすると、class1つの弱い指定では前の指定に負けてしまう、どういうことかというと、以下のcssを先のテストhtmlに足してみてください。

.sofubo #oya{color:green;}/*ここ詳細度 [0,1,1,0] 110点*/
#oya em {/*ここ詳細度 [0,1,0,1] 101点*/
color: blue;
font-weight: bold;
}
#oya table,#oya td,#oya th{ /*ここすべて詳細度 [0,1,0,1] 101点*/
border:2px pink solid;
}
すると、さっきの指定が違う物に化けてしまうと思います。継ぎたした物の方が詳細度が高いからです。

こういう現象が、wanchu さんの今回提示されていない部分で起こっている可能性が高いと思われます。ご自分の理解されていない、テンプレートなど使っておられませんか?詳細度を理解したうえで、確認されると原因が見つかる筈です。詳細度はCssの根幹部分に当たりますので、勉強されるとことお勧めします。
  • 回答No.1

ベストアンサー率 62% (910/1449)

h1、黒枠、休診を赤に。
この三つともちゃんと適用・表示されてますよ(IE8、Firefox22.0)。
きちんとDOCTYPE宣言してますか?
結果を報告する
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。
関連するQ&A

その他の関連するQ&Aをキーワードで探す

ピックアップ

ページ先頭へ