tableのレイアウトでchromeで表示した時だけ右側に隙間ができてしまう

スマホ表示の時に横にスクロールできるtableのレイアウトで、chromeでPC表示した時だけ右側に隙間ができてしまいます。
Firefoxでは正常に表示されました。
リセットcssでcss-wipeを当てております。
色々試したところ、body要素に当ててあるmargin: 0;を消すとテーブルの隙間を消すことができました。
ただ、body要素へのmargin:0を外してしまうと、chromeのbodyに適応されているmargin: 8pxが打ち消せず困っています。
良い方法はありますでしょうか？
よろしくお願いします。

##コード

html
1        <div class="bl_vertTable">
2          <table>
3            <thead>
4              <tr>
5                <th>名前</th>
6                <th>所属</th>
7                <th>職種</th>
8                <th>得意分野</th>
9              </tr>
10            </thead>
11            <tbody>
12              <tr>
13                <td>にゃほにゃほ</td>
14                <td>にゃほにゃほ</td>
15                <td>にゃほにゃほ</td>
16                <td>にゃほにゃほ</td>
17              </tr>
18              <tr>
19                <td>にゃほにゃほ</td>
20                <td>にゃほにゃほ</td>
21                <td>にゃほにゃほ</td>
22                <td>にゃほにゃほ</td>
23              </tr>
24              <tr>
25                <td>にゃほにゃほ</td>
26                <td>にゃほにゃほ</td>
27                <td>にゃほにゃほ</td>
28                <td>にゃほにゃほ</td>
29              </tr>
30            </tbody>
31          </table>
32        </div><!-- /.bl_vertTable -->

scss
1/* setting */
2$spWidth: 768px;
3
4/* reset */
5@import './_scss/css-wipe.scss';
6
7/* block */
8.bl_vertTable {
9  border: 1px solid #ddd;
10  table {
11    table-layout: fixed;
12    text-align: center;
13    width: 100%;
14    thead {
15      tr {
16        background-color: #efefef;
17      }
18    }
19    th, td {
20      border-bottom: 1px solid #ddd;
21      border-right: 1px solid #ddd;
22      padding: 15px;
23      vertical-align: middle;
24
25      &:last-child {
26        border-right-width: 0;
27      }
28    }
29    th {
30      font-weight: bold;
31    }
32    tbody {
33      tr {
34        &:last-child {
35          td {
36            border-bottom-width: 0;
37          }
38        }
39      }
40    }
41  }
42}
43
44@media screen and (max-width: $spWidth) {
45  .bl_vertTable {
46    border-left-width: 0;
47    border-right-width: 0;
48    overflow-x: auto;
49    table {
50      min-width: 100%;
51      width: auto;
52      th, td {
53        white-space: nowrap;
54        &:first-child {
55          border-left: 1px solid #ddd;
56        }
57        &:last-child {
58          border-right-width: 1px;
59        }
60      }
61    }
62  }
63}
64

scss
1
2/* css-wipe */
3* {
4  box-sizing: border-box;
5}
6/* webkit specific styles */
7
8input[type="color"]::-webkit-color-swatch {
9  border: none;
10}
11
12input[type="color"]::-webkit-color-swatch-wrapper {
13  padding: 0;
14}
15/*
16html5doctor.com Reset Stylesheet
17v1.6.1
18Last Updated: 2010-09-17
19Author: Richard Clark - http://richclarkdesign.com
20Twitter: @rich_clark
21*/
22
23html, body, div, span, object, iframe,
24h1, h2, h3, h4, h5, h6, p, blockquote, pre,
25abbr, address, cite, code,
26del, dfn, em, img, ins, kbd, q, samp,
27small, strong, sub, sup, var,
28b, i,
29dl, dt, dd, ol, ul, li,
30fieldset, form, label, legend,
31table, caption, tbody, tfoot, thead, tr, th, td,
32article, aside, canvas, details, figcaption, figure,
33footer, header, hgroup, menu, nav, section, summary,
34time, mark, audio, video {
35  background: transparent;
36  border: 0;
37  font-size: 100%;
38  font-weight: inherit;
39  margin: 0;
40  outline: 0;
41  padding: 0;
42  vertical-align: baseline;
43}
44
45body {
46  line-height: 1;
47}
48
49article,aside,details,figcaption,figure,
50footer,header,hgroup,menu,nav,section {
51  display: block;
52}
53
54nav ul {
55  list-style: none;
56}
57
58blockquote, q {
59  quotes: none;
60}
61
62blockquote:before, blockquote:after,
63q:before, q:after {
64  content: '';
65  content: none;
66}
67
68a {
69  background: transparent;
70  font-size: 100%;
71  margin: 0;
72  padding: 0;
73  vertical-align: baseline;
74}
75
76/* change colours to suit your needs */
77ins {
78  background-color: #ff9;
79  color: #000;
80  text-decoration: none;
81}
82
83/* change colours to suit your needs */
84mark {
85  background-color: #ff9;
86  color: #000;
87  font-style: italic;
88  font-weight: bold;
89}
90
91del {
92  text-decoration: line-through;
93}
94
95abbr[title], dfn[title] {
96  border-bottom: 1px dotted;
97  cursor: help;
98}
99
100table {
101  border-collapse: collapse;
102  border-spacing: 0;
103}
104
105/* change border colour to suit your needs */
106hr {
107  border: 0;
108  border-top: 1px solid #cccccc;
109  display: block;
110  height: 1px;
111  margin: 1em 0;
112  padding: 0;
113}
114
115input, select {
116  vertical-align: middle;
117}
118
119input:focus {
120  outline: none;
121}
122ul, ol {
123  list-style-type: none;
124}
125

##FireFoxでの表示

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

回答1件

余白が、どこを指しているのかがよくわかっていないのですが、
「得意分野」の背景色の右側に1pxほどの余白が出てしまっている、という意味なのであれば、以下を指定することで解決しそうです。

border-collapse: collapse;を指定していないのであれば、そちらを指定すると解決しそうです。

CSS
1/* block */
2.bl_vertTable {
3  border: 1px solid #ddd;
4  table {
5    table-layout: fixed;
6    text-align: center;
7    width: 100%;
8
9    border-collapse: collapse; /* 追加 */
10
11    thead {
12      tr {
13        background-color: #efefef;
14      }
15    }
16    th, td {
17      /* 不要 */
18      /*
19      border-bottom: 1px solid #ddd;
20      border-right: 1px solid #ddd;
21      */
22
23      border: 1px solid #ddd; /* 追加 */
24
25      padding: 15px;
26      vertical-align: middle;
27      
28      /* 不要 */
29      /*
30      &:last-child {
31        border-right-width: 0;
32      }
33      */
34    }
35    th {
36      font-weight: bold;
37    }
38    
39    /* 不要 */
40    /*
41    tbody {
42      tr {
43        &:last-child {
44          td {
45            border-bottom-width: 0;
46          }
47        }
48      }
49    }
50    */
51  }
52}