…空いてますね。。

【CSS】display: table;

きっと俺だけ知らないシリーズ。。(この記事からスタートw)

隙間拡大
table, その外側のdivにも無いのに隙間が…?

 

拡大してみると、

隙間拡大
…空いてますね。。

この部分のhtmlはこれ。

<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)は、

/*--------------------------------------------------------------
# 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はちょっと違うなぁということで。

参考