表の縦線に隙間ができてしまう

Question

前提

_イタリックテキスト_表の縦線を作るためborder-leftを曜日に対して指示したが、
隙間ができてしまいます。

実現したいこと

縦線を下記のように表示させたい。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

<table> <tr> <td class="open">診療時間</td> <td class="week">月・火</td> <td class="time-am">午前 8:30~12:30</td> <td class="time-pm">午後 15:00~18:30</td> </tr>

             <tr>
                <td class="open"></td>
                <td class="week">木・金</td>
                <td class="time-am">午前 8:30~12:30</td>
                <td class="time-pm">午後 15:30~19:00</td>
             </tr>

             <tr>
                <td class="open"></td>
                <td class="week">土・水</td>
                <td class="time-am">午前 8:30~12:30</td>
                <td class="time-pm">午後 14:00~18:00</td>
             </tr>
 
             <tr>
                <td class="close">休診日</td> 
                <td class="holiday">日曜・祝日</td>
             </tr>
         </table>

table {
font-size: 14px;
line-height: 38px;
text-align: left;
margin-top: 50px;
border-top: 2px solid #E7E7E7;
border-bottom: 2px solid #E7E7E7;
border-collapse: separate;
}

.week {
background: linear-gradient(transparent 80%, #99E5A5 80%);
max-width: 42px;

}

.open {
border-right: 2px solid #E7E7E7;
padding-right: 57px;

}

.close {
border-right: 2px solid #E7E7E7;
padding-right: 57px;

}

.close,
.holiday {
padding-top: 31px;
}

.time-am {
padding-left: 23px;
padding-right: 17px;
}

.time-pm {
padding-right: 50px;
}

試したこと

border-collapseを親要素に追加しても変化はなかった。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[m.ts10806]

コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564

Answer 1

border では高さや位置を調整できないので、border の設定は削除して、
疑似要素で境界線を表示させて、高さや位置を調整すればどうでしょう。

border-rightの設定を削除して下記のコードを追加してみてください。

.open, .close{
  position: relative;
}
.open::after,
.close::after {
  content: "";
  position: absolute;
  right: 0;
  border-right: 2px solid #E7E7E7;  
}
.open::after {
  top: 5px;
  bottom: -8px;
} 
.close::after {
  top: 25px;
  bottom: 5px;
}

Comments

[web83740439]

ありがとうございました。