css - 空白のあるインラインブロック要素間のギャップ: nowrap とオーバーフロー: 親要素のスクロール

Question

テーブルが長いため、オーバーフローをスクロールするテーブルを表示したかった (ただし、div を使用しています)。私が得ている問題は、div 間に不明なギャップがあることです。

スニペットは次のとおりです: 列 (div) 間の不要なギャップの原因は何ですか?

.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>