投稿

ラベル(table)が付いた投稿を表示しています

Javascriptを使わずCSSだけでタブ切り替えのタイムテーブルを作るソース

 参考サイト: 【CSS】CSSだけでタブ切り替えを作る方法 - bagelee(ベーグリー) <style type="text/css"> <!-- #timetable{font-size:0;} .content{display:none;} .check{display:none;} #check1:checked ~ #check1_content, #check2:checked ~ #check2_content, #check3:checked ~ #check3_content, #check4:checked ~ #check4_content, #check5:checked ~ #check5_content, #check6:checked ~ #check6_content, #check7:checked ~ #check7_content {display:block;} .label:hover{color:red;} .check:checked + .label{border-bottom: solid 5px red;} .check:checked + .label:hover:after{color:red;} .label{   font-size:36px;   padding:0 5px 0 5px;   border-right: solid 1px gray;   cursor:-moz-pointer;   cursor:-webkit-pointer;   cursor: pointer; } .content{   padding-top:10px; } .time{   width:80px;   font-size:24px;   text-align:right; } .subtime{   width:80px;   font-size:16px;   text-align:right; } .summary{   padding-left:10px;   font-size:16px; } --> </styl...

手動で予約状況を入力する場合のtableのサンプル

予約状況 予約状況 時刻 月 火 水 木 金 土 日 0:00~0:30   済           0:30~1:00               1:00~1:30               1:30~2:00               <!DOCTYPE html> <html lang="ja"> <head> <title>予約状況</title> <style type="text/css"> <!-- .border{border:1px solid gray;padding:5px;} .reserved{background-color:gray;font-weight:bold;color:white;text-align:center;} .waiting{background-color:white;} --> </style> </head> <body> <table style="border-collapse:separate;border-spacing:2px 2px;"> <caption style="font-weight:bold;">予約状況</caption> <tbody> <tr> <th class="border">時刻</th> <th class="border">月</th> <th class="border">火</th> <th class="border">水</th> <th class="border">木</t...

BlueGriffonのバグ:tableタグ内のtdタグで「セルの分割」をするとtdタグではなくtbタグが作られて失敗する

イメージ
2021/5/19 7:55頃。  BlueGriffonはWYSIWYG方式でウェブページの編集が行えるフリーソフトウェアで最初からウェブページを作成するとソースが汚くなるが編集ならば汚くなりにくく便利なソフト。BlueGriffonにはいくつかのバグがあるらしく、 空行が勝手に挿入されたり、新たに保存したら別名で保存する時に保存用ダイアログが表示されずに反応が無くなって保存できず強制終了せざるを得なくなったりするバグ には遭遇していたが、今回、 表の編集を試したところ、致命的なバグに遭遇した 。 元のソース。 <!DOCTYPE html> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>bluegriffonの表修正のバグ:セルの分割に失敗する</title> <style type="text/css"> <!-- table{width:600px;border-collapse:collapse;border-spacing:0px;} tbody,th,td {border:1px solid gray;} td {text-align:center;vertical-align:top;padding:5px;width:100px;} --> </style> </head> <body> <table> <tbody> <tr><th><br></th><th>A</th><th>B</th><th>C</th><th>D</th><th>E</th></tr> <tr> <th>1</th> <td>A1</td> <td...