tableタグ、指定の列の外側をボーダーで囲みたい

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の外側をボーダーで囲いたいのですが、どうすればいいでしょうか?

m.ts10806

2021/04/23 15:18

SCSSそのままではなくコンパイル後のCSSを提示されたほうがアドバイス得やすいと思います（手元でコンパイルしなければなりませんし、CSS,CSS3が分かる人全員がSCSSまでわかるとは限りません）

Fukusuke0604

2021/04/23 15:35

了解しました。 scssからcssへ変更しました。

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

回答2件

ベストアンサー

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

kei344

総合スコア69606

Fukusuke0604

2021/04/23 15:56 編集

回答ありがとうございます。上下のoutlineを消せばよい。とのことですが、どのように書けばいいのでしょうか? outline-top: none; outline-botoom: none; ではないですよね。。。

kei344

2021/04/23 16:08

すみません、調べてみたらoutlineは個別指定できないようです。【outline-width - CSS: カスケーディングスタイルシート | MDN】 https://developer.mozilla.org/ja/docs/Web/CSS/outline-width

Fukusuke0604

2021/04/23 16:10

やっぱりそうですよね。。。。回答いただきありがとうございました。

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

あまり美しくはありませんが…

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>