きっと俺だけ知らないシリーズ。。(この記事からスタートw)
拡大してみると、
この部分のhtmlはこれ。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="opening-hours"> | |
<table summary="受付時間"> | |
<thead> | |
<tr> | |
<th class="open-close">受付時間</th> | |
<th>月</th> | |
<th>火</th> | |
<th>水</th> | |
<th>木</th> | |
<th>金</th> | |
<th class="saturday">土</th> | |
</tr> | |
</thead> | |
<tbody> | |
<tr> | |
<td>9:00〜12:30</td> | |
<td>◎</td> | |
<td>◎</td> | |
<td>◎</td> | |
<td>◎</td> | |
<td>◎</td> | |
<td>◎</td> | |
</tr> | |
<tr> | |
<td>14:30〜18:30</td> | |
<td>◎</td> | |
<td>◎</td> | |
<td>◎</td> | |
<td>◎</td> | |
<td>◎</td> | |
<td>▲</td> | |
</tr> | |
</tbody> | |
</table> | |
<ul> | |
<li>土曜日(▲)は16:30まで</li> | |
<li>休診日:日曜 / 祝日予約制 / 臨時休診となることがあります</li> | |
</ul> | |
</div><!-- /.opening-hours --> |
まぁ、その、◎とか▲とかは一先ず置いといて。。
スタイル(sass)は、
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*-------------------------------------------------------------- | |
# OpeningHours table. | |
--------------------------------------------------------------*/ | |
.opening-hours { | |
background-color: #fff; | |
border: 2px solid #999; | |
table { | |
text-align: center; | |
color: #42210B; | |
border-bottom: 2px solid #999; | |
th, td { | |
text-align: center; | |
padding: 5px; | |
border-right: 1px solid #999; | |
border-bottom: 1px dotted #999; | |
&:last-child { | |
border-right: none; | |
} | |
} | |
th { | |
background-color: #FDF4E8; | |
} | |
thead { | |
border-bottom: 2px solid #999; | |
} | |
tbody { | |
td { | |
&:first-child { | |
text-align: right; | |
} | |
} | |
} | |
.open-close { | |
background-color: $tohoya-base-heading-color; | |
color: #fff; | |
width: 35%; | |
} | |
.saturday { | |
color: #49B4C3; | |
} | |
} | |
ul { | |
margin: 1em; | |
li { | |
color: $tohoya-caution-color; | |
position: relative; | |
padding-left: 1em; | |
@include font-size(1.2); | |
&:before { | |
content: '※'; | |
position: absolute; | |
left: 0; | |
} | |
} | |
} | |
} |
予定ではこんなところで止まるはずじゃなかったんですが、どうしてもこの隙間が消えず。。
目次
とりあえずdisplay: table; で消える
暫定的もいいとこなんですが、とりあえず、display: table; で消えました。
他にも、
- table
- inline-table
- table-cell
で消えたんですが、inline-table, table-cellはちょっと違うなぁということで。