カレンダー(テーブル)の背景適用範囲の調整方法はありますか？

前提・実現したいこと

・背景がアンダーライン上まで伸びているのを
左右の様に余白を入れたいです。
ボーダーライン表示はそのままに、背景部分を調整する事は可能でしょうか？

・それともう一点、２列目の曜日部分のアンダーラインを繋げて１本の長い線には出来ますか？

よろしくお願い致します。

--追記--

・背景がアンダーライン上まで伸びているのを～･･･
→違いを分かりやすくするために13日と15日のみ加工してみました。
背景カラーの適用範囲を調整して
アンダーラインがハッキリ見えるようにしたいのです。(ラインの色を濃くするとかではなく・・)

・曜日部分のアンダーラインを全部繋げて１本の長い線～･･･
→日付部分と違って、曜日部分はアンダーラインを結合したいです。。

上記の事は出来ますでしょうか＞＜？

該当のソースコード

-ＨＴＭＬ-

<tr class="week">
	<td  bgcolor="#FF3300">日</td>
	<td  bgcolor="#FFFFFF">月</td>
	<td  bgcolor="#FFFFFF">火</td>
	<td  bgcolor="#FFFFFF">水</td>
	<td  bgcolor="#FFFFFF">木</td>
	<td  bgcolor="#FFFFFF">金</td>
	<td  bgcolor="#A6C0E1">土</td>
</tr>

<tr>
	<td bgcolor="#FFFFFF"></td>
	<td bgcolor="#FFFFFF"></td>
	<td bgcolor="#FFFFFF"></td>
	<td bgcolor="#ffffff">1</td>
	<td bgcolor="#ffcc99">2</td>
	<td bgcolor="#ffffff">3</td>
	<td bgcolor="#BED0E8">4</td>
</tr>

<tr>
	<td bgcolor="#ffcc99">5</td>
	<td bgcolor="#FFFFFF">6</td>
	<td bgcolor="#FFFFFF">7</td>
	<td bgcolor="#FFFFFF">8</td>
	<td bgcolor="#FFFFFF">9</td>
	<td bgcolor="#ffffff">10</td>
	<td bgcolor="#ffcc99">11</td>

</tr>

<tr>
	<td  bgcolor="#ffcc99">12</td>
	<td bgcolor="#ffcc99">13</td>
	<td bgcolor="#ffcc99">14</td>
	<td bgcolor="#ffcc99">15</td>
	<td bgcolor="#ffcc99">16</td>
	<td bgcolor="#FFFFFF">17</td>
	<td bgcolor="#BED0E8">18</td>
</tr>

<tr>
	<td bgcolor="#ffcc99">19</td>
	<td bgcolor="#ffffff">20</td>
	<td bgcolor="#FFFFFF">21</td>
	<td bgcolor="#FFFFFF">22</td>
	<td bgcolor="#ffffff">23</td>
	<td bgcolor="#FFFFFF">24</td>
	<td bgcolor="#BED0E8">25</td>
  </tr>

-ＣＳＳ-
table {
text-align: center;
width: 200px;
height: 190px;
font-size: 12px;
border: #8E8E8E solid 1px;
font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
}

.month {
border-bottom: 2px solid #333333;
border-image: -moz-linear-gradient(left, #fff 10%, #333333 50%, #fff 90%);
border-image: -webkit-linear-gradient(left, #fff 10%, #333333 50%, #fff 90%);
border-image: linear-gradient(to right, #fff 10%, #333333 50%, #fff 90%);
border-image-slice: 1;
}

.week td, .month {
font-weight: bold;
}

td {
border-bottom: 1px dashed #C9C9C9;
}
.non td {
border-style: none;
}
.week td {
border-bottom: 1px solid #8E8E8E;
}

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

DreamWeaver2018

x_x

2018/08/16 04:27

どうしたいのかわからないので、画像で説明してもらえるでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

これでどうでしょう

CSS
1table {
2  border-spacing: 0;
3}
4
5td {
6  padding: 2px 3px;
7  background-clip: content-box;
8}

https://developer.mozilla.org/ja/docs/Web/CSS/background-clip

投稿2018/08/16 06:15

x_x

総合スコア13749

aboo

2018/08/16 06:42

ありがとうございます、出来ました＾＾！！教えていただいたタグにline-heightを追加して理想の形になりました！本当にありがとうございますｍ(_ _)ｍ

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！