前提・実現したいこと
・背景がアンダーライン上まで伸びているのを
左右の様に余白を入れたいです。
ボーダーライン表示はそのままに、背景部分を調整する事は可能でしょうか?
・それともう一点、2列目の曜日部分のアンダーラインを繋げて1本の長い線には出来ますか?
よろしくお願い致します。
--追記--
・背景がアンダーライン上まで伸びているのを~・・・
→違いを分かりやすくするために13日と15日のみ加工してみました。
背景カラーの適用範囲を調整して
アンダーラインがハッキリ見えるようにしたいのです。(ラインの色を濃くするとかではなく・・)
・曜日部分のアンダーラインを全部繋げて1本の長い線~・・・
→日付部分と違って、曜日部分はアンダーラインを結合したいです。。
上記の事は出来ますでしょうか><?
該当のソースコード
-HTML-
<table cellspacing="2" style="color: #666;"> <tr><td class="month" colspan="7">2018年8月</td></tr></tr><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 class="non"> <td bgcolor="#ffcc99">26</td> <td bgcolor="#FFFFFF">27</td> <td bgcolor="#FFFFFF">28</td> <td bgcolor="#FFFFFF">29</td> <td bgcolor="#FFFFFF">30</td> <td bgcolor="#FFFFFF">31</td> <td bgcolor="#ffffff"></td> </tr> </table><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>
-CSS-
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
回答1件
あなたの回答
tips
プレビュー