http://k52.org/syokuzai/c/fish/
↑のようなカレンダーを作りたいと考えております。
ソースよりTABLE内のTRとTDに外部CSSファイルで設定していると
思っているのですが、どのようにすればTDの背景色(紺色)より
大きい幅のTR(要は列)のライン(薄い青色)を付けられるのか
が分かりません。
わかりにくい説明とは思うのですが、どうぞよろしくお願いします。
No.1ベストアンサー
- 回答日時:
構造も簡単だしざっとみれば、ある程度想像つくと思いますが・・・
適合するCSSをぬきだすとこんな感じ
<style>
table.cal, tr, td {
padding:4px;
}
tr.fish {
background-color:#F3F6FF;
}
td.mon span {
background-color:#557766;
color:#FFFFFF;
display:block;
}
</style>
<table class="cal">
<tbody>
<tr class="fish">
<td class="mon"><span>1</span></td>
<td class="mon">2</td>
<td class="mon">3</td>
</tr>
<tr>
<td class="mon">4</td>
<td class="mon"><span>5</span></td>
<td class="mon">6</td>
</tr>
<tr class="fish">
<td class="mon">7</td>
<td class="mon">8</td>
<td class="mon"><span>9</span></td>
</tr>
</tbody>
</table>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 【CSS】:hasで可能? imgを含むtr要素を選択したい 1 2022/11/17 14:36
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- MySQL SQL任意に並び替えをしたい 2 2023/08/28 10:47
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- PHP htmlで複数の個数入力欄を表示させるには 1 2022/09/20 03:11
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
- JavaScript 追加ボタンを押した際に ok ボタンを押した場合のみ入力値が追記されるようにしたいです 6 2022/05/29 09:57
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
cssで、表示されるテキストによ...
-
tableにul,または,olを入れられ...
-
テーブルの行を折りたたみたい...
-
文字列が入っているtdを削除せ...
-
CSSだけで<table>の<td>や<tr>...
-
テーブルの任意の列を非表示に...
-
文字の中央そろえを一括で指定...
-
テーブルの行数が違う列のテキ...
-
IEで細い線
-
HTMLのテーブルで桁をそろ...
-
テーブルのセルに画像をピッタ...
-
nowrapを指定しても改行される...
-
テーブルのヘッダとボディの幅...
-
tableの要素(tr、td)に一...
-
テーブルの行の高さを指定する...
-
TRタグの余白をcssで設定するには
-
テーブルの上に空行が入る・・...
-
Mac IEのバグなのでしょうか?
-
【CSS】:hasで可能? imgを含む...
-
逆L字の表(table)組み
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
テーブルの行を折りたたみたい...
-
テーブルの任意の列を非表示に...
-
tableにul,または,olを入れられ...
-
TRタグの余白をcssで設定するには
-
cssで、表示されるテキストによ...
-
HTML <td></td>タグ セル内余...
-
テーブルのヘッダとボディの幅...
-
文字列が入っているtdを削除せ...
-
テーブルのセルに画像をピッタ...
-
テーブルの行の高さを指定する...
-
テーブルの表示がずれます
-
ホームページ 表の上の余白を...
-
テーブルのセルにアンカー
-
テーブルタグのセルの幅の一部...
-
逆L字の表(table)組み
-
中に<table></table>が使えるア...
-
tableでcolspanを使うと次行以...
-
スタイルシートで colspan=3と...
-
TABLE内の枠線を一部消すには
-
テーブルの上に空行が入る・・...
おすすめ情報