Q&A
SCSSそのままではなくコンパイル後のCSSを提示されたほうがアドバイス得やすいと思います（手元でコンパイルしなければなりませんし、CSS,CSS3が分かる人全員がSCSSまでわかるとは限りません）
tableタグで作成した表の指定の縦列の外側をボーダーで囲みたいです。
完成形の見本は以下です。
自分の書いたコードでは以下のようになっています。
html
1 <table> 2 <tr> 3 <th></th> 4 <th class="xxx"><p>XXX</p></th> 5 <th class="profession_a"><p>同業A社</p></th> 6 <th class="profession_b"><p>同業B社</p></th> 7 </tr> 8 <tr> 9 <td class="td_title">Googleサジェスト対応</td> 10 <td class="xxx_wrap">○対応可</td> 11 <td>○対応可</td> 12 <td>×対応不可</td> 13 </tr> 14 <tr> 15 <td class="td_title">Yahoo!サジェスト対応</td> 16 <td class="AERA_wrap">○対応可</td> 17 <td>○対応可</td> 18 <td>○対応可</td> 19 </tr> 20 <tr> 21 <td class="td_title">Google表示率</td> 22 <td class="xxx_wrap">90％以上</td> 23 <td>20%</td> 24 <td>×対応不可</td> 25 </tr> 26 <tr> 27 <td class="td_title">Yahoo!表示率</td> 28 <td class="xxx_wrap">90%以上</td> 29 <td>70%</td> 30 <td>50%</td> 31 </tr> 32 <tr> 33 <td class="td_title">地域指定</td> 34 <td class="xxx_wrap">○対応可</td> 35 <td>×対応不可</td> 36 <td>○対応可</td> 37 </tr> 38 <tr> 39 <td class="td_title">成果スピード<br> 40 ※Google</td> 41 <td class="xxx_wrap">2週間〜1ヶ月</td> 42 <td>1〜3ヶ月</td> 43 <td>×対応不可</td> 44 </tr> 45 <tr> 46 <td class="td_title">報酬体系</td> 47 <td class="xxx_wrap">成果報酬<br> 48 （表示された分だけ）</td> 49 <td>月額固定</td> 50 <td>成果報酬<br> 51 （表示された分だけ）</td> 52 </tr> 53 </table> 54コード
css
1table { margin: 55px auto 60px; border-collapse: separate; border-spacing: 4px 0; } 2 3table tr th p { border-radius: 10px; color: #fff; width: 190px; padding: 18px 0 16px; margin: 0 auto 23px; } 4 5table tr .xxx p { background-color: #d8395b; } 6 7table tr .profession_a p { background-color: #0d526d; } 8 9table tr .profession_b p { background-color: #617795; } 10 11table tr td { border: 1px solid #dbdbdb; width: 201px; height: 84px; vertical-align: middle; text-align: center; font-size: 16px; } 12 13table tr .td_title { background-color: #e7eef2; } 14 15table tr .xxx_wrap { outline: 11px solid #d8395b; color: #d8395b; } 16コード
class名.xxx_wrapの外側をボーダーで囲いたいのですが、どうすればいいでしょうか?
回答2件
0
ベストアンサー
2番目のtrと最後のtrの中以外の.xxx_wrapから上下のoutlineを消せばよいです。
追記：
無理やりですが。
CSS
1.xxx_wrap { 2 position: relative; 3} 4.xxx_wrap::after { 5 position: absolute; 6 content: ""; 7 top: -11px; 8 bottom: -11px; 9 left: -11px; 10 right: -11px; 11 border-style: solid; 12 border-width: 0 11px; 13 border-color: #d8395b; 14} 15tr:nth-child(2) .xxx_wrap::after { 16 border-top-width: 11px; 17} 18tr:last-child .xxx_wrap::after { 19 border-bottom-width: 11px; 20} 21```**動くサンプル：**[https://jsfiddle.net/8c7kxez3/](https://jsfiddle.net/8c7kxez3/)
投稿2021/04/23 15:45
編集2021/04/23 16:15
総合スコア69458
回答ありがとうございます。
上下のoutlineを消せばよい。とのことですが、どのように書けばいいのでしょうか?
outline-top: none;
outline-botoom: none;
ではないですよね。。。
すみません、調べてみたらoutlineは個別指定できないようです。
【outline-width - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/outline-width
やっぱりそうですよね。。。。
回答いただきありがとうございました。
0
あまり美しくはありませんが…
HTML
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset=utf-8 /> 5 <title>sample</title> 6 <style> 7 table { margin: 55px auto 60px; border-collapse: collapse; border-spacing: 4px 0; } 8 table tr th p { border-radius: 10px; color: #fff; width: 190px; padding: 18px 0 16px; margin: 0 auto 23px; } 9 table tr .xxx p { background-color: #d8395b; } 10 table tr .profession_a p { background-color: #0d526d; } 11 table tr .profession_b p { background-color: #617795; } 12 table tr td { border: 1px solid #dbdbdb; width: 201px; height: 84px; vertical-align: middle; text-align: center; font-size: 16px; } 13 table tr .td_title { background-color: #e7eef2; } 14 table tr .xxx_wrap_top { 15 border: 11px solid #d8395b; 16 border-bottom: 1px solid #dbdbdb; 17 } 18 table tr .xxx_wrap { 19 border: 11px solid #d8395b; 20 border-top: 1px solid #dbdbdb; 21 border-bottom: 1px solid #dbdbdb; 22 } 23 table tr .xxx_wrap_bottom { 24 border: 11px solid #d8395b; 25 border-top: 1px solid #dbdbdb; 26 } 27 </style> 28 </head> 29 <body> 30 <table class="collapsed"> 31 <thead> 32 <tr> 33 <th></th> 34 <th class="xxx"><p>XXX</p></th> 35 <th class="profession_a"><p>同業A社</p></th> 36 <th class="profession_b"><p>同業B社</p></th> 37 </tr> 38 </thead> 39 <tbody> 40 <tr> 41 <td class="td_title">Googleサジェスト対応</td> 42 <td class="xxx_wrap_top">○対応可</td> 43 <td>○対応可</td> 44 <td>×対応不可</td> 45 </tr> 46 <tr> 47 <td class="td_title">Yahoo!サジェスト対応</td> 48 <td class="xxx_wrap">○対応可</td> 49 <td>○対応可</td> 50 <td>○対応可</td> 51 </tr> 52 <tr> 53 <td class="td_title">Google表示率</td> 54 <td class="xxx_wrap">90％以上</td> 55 <td>20%</td> 56 <td>×対応不可</td> 57 </tr> 58 <tr> 59 <td class="td_title">Yahoo!表示率</td> 60 <td class="xxx_wrap">90%以上</td> 61 <td>70%</td> 62 <td>50%</td> 63 </tr> 64 <tr> 65 <td class="td_title">地域指定</td> 66 <td class="xxx_wrap">○対応可</td> 67 <td>×対応不可</td> 68 <td>○対応可</td> 69 </tr> 70 <tr> 71 <td class="td_title">成果スピード<br> 72 ※Google</td> 73 <td class="xxx_wrap">2週間〜1ヶ月</td> 74 <td>1〜3ヶ月</td> 75 <td>×対応不可</td> 76 </tr> 77 <tr> 78 <td class="td_title">報酬体系</td> 79 <td class="xxx_wrap_bottom">成果報酬<br> 80 （表示された分だけ）</td> 81 <td>月額固定</td> 82 <td>成果報酬<br> 83 （表示された分だけ）</td> 84 </tr> 85 </tbody> 86 </table> 87 </body> 88</html>
投稿2021/04/23 16:27
総合スコア8402
あなたの回答
tips
プレビュー
