2

我想显示一个表格（但我使用的是 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>

4

2 回答 2

2

如果有人遇到这个问题，这里有两件事要说。

  1. 正如已经观察到的那样，标记有些问题。有时从其他地方复制代码时，空格并不完全是空格，实际上是作为字符呈现的。我几乎可以肯定这里就是这种情况，只是懒得复制代码段并检查。

  2. font-size: 0在行元素和列本身上使用font-size: <whatever-value-should-be>可以解决问题，而不会干扰 HTML。这是因为在行上将字体大小设置为 0 会使“隐藏字符”完全消失 - 它们的字体大小为 0。然后应该在子代中恢复字体大小，因为它（即 0）是继承的。

于 2018-11-14T22:40:02.297 回答
0

有趣的是，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>

于 2017-07-05T23:15:10.560 回答