空白を含むインラインブロック要素間のギャップ：nowrapとoverflow：スクロール親要素

Question

テーブルが長いためオーバーフローをスクロールするテーブルを表示したかったのですが（divを使用しています）私が得ている問題は、私の部門間に未知のギャップがあることです。

ここに、スニペットがあります：列（divs）間の不要なギャップの原因は何ですか？興味深いことに

.mobile-cross-reference { 
 
    border: 1px solid #2980b9; 
 
    color: #333; 
 
    float: left; 
 
    margin: 2%; 
 
    width: 96%; 
 
} 
 
    
 
.m-grid-scroll { 
 
    overflow-x: scroll; 
 
} 
 

 
.m-grid-header { 
 
    background-color: #2980b9; 
 
    color: white; 
 
    text-align: center; 
 
} 
 

 
.m-grid-header, 
 
.m-grid-row { 
 
    float: left; 
 
    width: 100%; 
 
} 
 

 
.m-grid-header-col { 
 
    background-color: #2980b9 !important; 
 
} 
 

 
.m-grid-row-inline { 
 
    background-color: transparent; 
 
    display: inline-block; 
 
    float: none; 
 
    white-space: nowrap; 
 
} 
 

 
.m-grid-col { 
 
    border-right: 1px solid #ccc; 
 
    float: left; 
 
    padding: 1% 0 1% 1%; 
 
} 
 

 
.m-grid-col:last-child { 
 
    border-right: 0; 
 
} 
 

 
.m-grid-col3 { 
 
    width: 31%; 
 
} 
 

 
.m-grid-inline { 
 
    display: inline-block; 
 
    float: none; 
 
    margin: 0; 
 
}

<div class="mobile-cross-reference m-grid-scroll"> 
 
     <div class="m-grid-header m-grid-row-inline"> 
 
     <div class="m-grid-col m-grid-inline m-grid-col3 m-grid-header-col">Bourns</div> 
 
     <div class="m-grid-col m-grid-inline m-grid-col3 m-grid-header-col">BI Tech</div> 
 
     <div class="m-grid-col m-grid-inline m-grid-col3 m-grid-header-col">Dale/Vishay</div> 
 
     <div class="m-grid-col m-grid-inline m-grid-col3 m-grid-header-col">Philips/Mepco</div> 
 
     <div class="m-grid-col m-grid-inline m-grid-col3 m-grid-header-col">Murata</div> 
 
     <div class="m-grid-col m-grid-inline m-grid-col3 m-grid-header-col">Panasonic</div> 
 
     <div class="m-grid-col m-grid-inline m-grid-col3 m-grid-header-col">Spectrol</div> 
 
     <div class="m-grid-col m-grid-inline m-grid-col3 m-grid-header-col">Mil Spec</div> 
 
     </div> 
 
     <div class="m-grid-row m-grid-row-inline"> 
 
     <div class="m-grid-col m-grid-inline m-grid-col3">Bourns</div> 
 
     <div class="m-grid-col m-grid-inline m-grid-col3">BI Tech</div> 
 
     <div class="m-grid-col m-grid-inline m-grid-col3">Dale/Vishay</div> 
 
     <div class="m-grid-col m-grid-inline m-grid-col3">Philips/Mepco</div> 
 
     <div class="m-grid-col m-grid-inline m-grid-col3">Murata</div> 
 
     <div class="m-grid-col m-grid-inline m-grid-col3">Panasonic</div> 
 
     <div class="m-grid-col m-grid-inline m-grid-col3">Spectrol</div> 
 
     <div class="m-grid-col m-grid-inline m-grid-col3">Mil Spec</div> 
 
     </div> 
 
    </div>

Answer 1

、divタグ間の空白。最初の列を参照してください。うまく

.mobile-cross-reference { 
 
    border: 1px solid #2980b9; 
 
    color: #333; 
 

 
} 
 
    
 
.m-grid-scroll { 
 
    overflow-x: scroll; 
 
} 
 

 
.m-grid-header { 
 
    background-color: #2980b9; 
 
    color: white; 
 
    text-align: center; 
 
} 
 

 
.m-grid-header, 
 
.m-grid-row { 
 

 
    width: 100%; 
 
    white-space:nowrap; 
 
    display:block; 
 
} 
 

 
.m-grid-header-col { 
 
    background-color: #2980b9 !important; 
 
} 
 

 
.m-grid-row-inline { 
 
    background-color: transparent; 
 
    white-space: nowrap; 
 
} 
 

 
.m-grid-col { 
 
    border-right: 1px solid #ccc; 
 
    padding:0px; 
 
    margin:0px; 
 

 
} 
 

 
.m-grid-col:last-child { 
 
    border-right: 0; 
 
} 
 

 
.m-grid-col3 { 
 
    width: 31%; 
 
} 
 

 
.m-grid-inline { 
 
    display: inline-block; 
 

 
    margin: 0; 
 
}

<div class="mobile-cross-reference m-grid-scroll"> 
 
     <div class="m-grid-header m-grid-row-inline"><div class="m-grid-col m-grid-inline m-grid-col3 m-grid-header-col">Bourns</div><div class="m-grid-col m-grid-inline m-grid-col3 m-grid-header-col">BI Tech</div><div class="m-grid-col m-grid-inline m-grid-col3 m-grid-header-col">Dale/Vishay</div> 
 
     <div class="m-grid-col m-grid-inline m-grid-col3 m-grid-header-col">Philips/Mepco</div> 
 
     <div class="m-grid-col m-grid-inline m-grid-col3 m-grid-header-col">Murata</div> 
 
     <div class="m-grid-col m-grid-inline m-grid-col3 m-grid-header-col">Panasonic</div> 
 
     <div class="m-grid-col m-grid-inline m-grid-col3 m-grid-header-col">Spectrol</div> 
 
     <div class="m-grid-col m-grid-inline m-grid-col3 m-grid-header-col">Mil Spec</div> 
 
     </div> 
 
     <div class="m-grid-row m-grid-row-inline"> 
 
     <div class="m-grid-col m-grid-inline m-grid-col3">Bourns</div> 
 
     <div class="m-grid-col m-grid-inline m-grid-col3">BI Tech</div> 
 
     <div class="m-grid-col m-grid-inline m-grid-col3">Dale/Vishay</div> 
 
     <div class="m-grid-col m-grid-inline m-grid-col3">Philips/Mepco</div> 
 
     <div class="m-grid-col m-grid-inline m-grid-col3">Murata</div> 
 
     <div class="m-grid-col m-grid-inline m-grid-col3">Panasonic</div> 
 
     <div class="m-grid-col m-grid-inline m-grid-col3">Spectrol</div> 
 
     <div class="m-grid-col m-grid-inline m-grid-col3">Mil Spec</div> 
 
     </div> 
 
    </div>