stickyで行と列を固定したテーブルのヘッダーのボーダーが一部消える

実現したいこと

・テーブルの上の行と左の列を固定してスクロールさせる
・スクロール時の挙動に問題がないこと

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

HTMLとCSSでスクロールできるテーブルを作成しているのですが、「住所」の一列だけスクロール中にヘッダーの右の枠線が消えてしまいます。（データセルの枠線は消えません。）

一番左の固定列の幅を超える幅を設定すると消えてしまうようなのですが、いろいろ試しても直すことができず、、、。

■スクロール中　ボーダーが消える前

■ボーダーが消えた後（担当者名の左のボーダー）

該当のソースコード

HTML
1            <div class="data_tbl">
2                <table>
3                    <tr>
4                        <th class="column1">企業団体名</th>
5                        <th class="column2">代表アカウント<br>フラグ</th>
6                        <th class="column3">郵便番号</th>
7                        <th class="column4">住所</th>
8                        <th class="column5">担当者名</th>
9                        <th class="column6">部署</th>
10                        <th class="column7">役職</th>
11                        <th class="column8">メールアドレス</th>
12                        <th class="column9">電話番号</th>
13                        <th class="column10">連絡先</th>
14                    </tr>
15                    <tr>
16                        <th class="column1">株式会社A</th>
17                        <td class="column2">0</td>
18                        <td class="column3">000-0000</td>
19                        <td class="column4">東京都千代田区1-1-1千代田ビルA-101</td>
20                        <td class="column5">山田太郎</td>
21                        <td class="column6">営業部</td>
22                        <td class="column7">部長AAA</td>
23                        <td class="column8">test_mail@test.com</td>
24                        <td class="column9">000-0000-0000</td>
25                        <td class="column10">123456789-123456789</td>
26                    </tr>
27                    <tr>
28                        <th class="column1">株式会社A</th>
29                        <td class="column2">0</td>
30                        <td class="column3">000-0000</td>
31                        <td class="column4">東京都千代田区1-1-1千代田ビルA-101</td>
32                        <td class="column5">山田太郎</td>
33                        <td class="column6">営業部</td>
34                        <td class="column7">部長AAA</td>
35                        <td class="column8">test_mail@test.com</td>
36                        <td class="column9">000-0000-0000</td>
37                        <td class="column10">123456789-123456789</td>
38                    </tr>
39                    <tr>
40                        <th class="column1">株式会社A</th>
41                        <td class="column2">0</td>
42                        <td class="column3">000-0000</td>
43                        <td class="column4">東京都千代田区1-1-1千代田ビルA-101</td>
44                        <td class="column5">山田太郎</td>
45                        <td class="column6">営業部</td>
46                        <td class="column7">部長AAA</td>
47                        <td class="column8">test_mail@test.com</td>
48                        <td class="column9">000-0000-0000</td>
49                        <td class="column10">123456789-123456789</td>
50                    </tr>
51                    <tr>
52                        <th class="column1">株式会社A</th>
53                        <td class="column2">0</td>
54                        <td class="column3">000-0000</td>
55                        <td class="column4">東京都千代田区1-1-1千代田ビルA-101</td>
56                        <td class="column5">山田太郎</td>
57                        <td class="column6">営業部</td>
58                        <td class="column7">部長AAA</td>
59                        <td class="column8">test_mail@test.com</td>
60                        <td class="column9">000-0000-0000</td>
61                        <td class="column10">123456789-123456789</td>
62                    </tr>
63                </table>
64            </div>

CSS
1.data_tbl{
2    overflow: auto;
3    width: 100%;
4    height: 500px;
5}
6
7.data_tbl table{
8    margin: 0;
9    border-spacing: 0;
10    table-layout: fixed;
11    border-collapse: separate;
12    width: 1000px;
13}
14
15.data_tbl td{
16    border-right: 1px solid #999;
17    border-bottom: 1px solid #999;
18    background: #FFF;
19    padding: 5px;
20}
21
22.data_tbl th{
23    white-space: nowrap;
24    border-right: 1px solid #999;
25    border-bottom: 1px solid #999;
26    background: #f2f2f2;
27    position: sticky;
28    top: 0;
29    left: 0;
30}
31
32.data_tbl tr:first-child th{
33    border-top: 1px solid #999;
34}
35
36.data_tbl th:first-child{
37    border-left: 1px solid #999;
38}
39
40.data_tbl tr:first-child th:first-child{
41    z-index: 1;
42}
43
44.column1 {
45    width: 250px;
46}
47
48.column2 {
49    width: 120px;
50}
51
52.column3 {
53    width: 90px;
54}
55
56.column4 {
57    width: 260px;
58}
59
60.column5 {
61    width: 130px;
62}
63
64.column6 {
65    width: 130px;
66}
67
68.column7 {
69    width: 130px;
70}
71
72.column8 {
73    width: 250px;
74}
75
76.column9 {
77    width: 130px;
78}
79
80.column10 {
81    width: 150px;
82}

試したこと

「border-collapse: separate;」をtableのcssに追記しても挙動は変わりませんでした。

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

回答1件

ベストアンサー

css
1.data_tbl tr:first-child th:first-child {
2    opacity: 0;
3}

上記のような指定を追加して観察してみると分かると思いますが、上段（1行目）に left: 0 を与えているのが原因です。

position: sticky を与えている宣言から top と left の指定を外して、以下のようにそれぞれに指定を与えれば期待する動作になるのではないでしょうか。

css
1.data_tbl tr:first-child th {
2    top: 0;
3    border-top: 1px solid #999;
4}
5
6.data_tbl th:first-child {
7    left: 0;
8    border-left: 1px solid #999;
9}