设置td max-width时表格下方的额外空间

Question

我在我的网站上有桌子，我试图让它很好地适应PC屏幕和智能手机屏幕。所以一切顺利，直到我将一个td的max-width设置为110px。当我将max-width设置为td时，表格下方会出现额外的空格。因此，该表格不会占用它刚出现在表格下方的额外空间，也不是表格的余量。

＆＃13;

＆＃13;

.logos {
  margin-top: 8px;
  margin-bottom: 5px;
  margin-left: 10px;
  margin-right: 10px;
  float: left;
  height: 100%;
}

.trackname {
  text-align: left;
  width: 100%;
  max-width: 110px;
  text-overflow: ellipsis;
  overflow: hidden;
}

.tracks {
  width: 100%;
}

tr {
  padding: 0px;
  background-color: #383838;
}

.buttons {
  width: 115px;
}
#container {
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #000000;
    height: calc(100vh - 200px);
}
.cont{
    display: grid;

}
.innerbox {
    height: 100%;
    padding: 15px 0 0 5px;
    margin-right: 5px;
}
.box-style {
    padding: 20px;
    height: 100%;
    width: 100%;
    background-color: #242021;
    border-radius: 10px;
    color: #FFFFFF;
    font-size: 1.5em;
    text-align: center;
}

＆＃13;

<div id='body-content' class="col-sm-8 col-xs-12">
    <div id="container" class="cont">
        <div class="innerbox">
            <div class="box-style">
<table class="tracks list-group">
  <thead>
    <th></th>
    <th></th>
    <th></th>
  </thead>
  <tbody>
    <tr *ngFor="let track of tracklist; let i = index" class="list-group-item tablerow">
      <td class="logo">
        <div class="logos">
          <img *ngIf="track.Type == 1" src="assets/logo.png" width="30" align="left">
        </div>
      </td>
      <td class="trackname">
        <div>
          {{track.Name}}
        </div>
      </td>
      <td>
        <div class="buttons">
          <div class="btn-group" role="group">
            <button type="button" class="trackbuttons btn btn-info glyphicon glyphicon-align-center" ></button>
            <button type="button" class="trackbuttons btn btn-danger glyphicon glyphicon-remove"></button>
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>
            </div>
        </div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我需要该轨道名称的最大宽度才能使表格适合智能手机屏幕。如果没有设置最大宽度，则表格将被部分隐藏，因为表格会以某个宽度收缩（当一个单词不适合列时）。

所以我可以阻止以某种方式显示额外的空间，或者我可以以某种方式管理表，以便在没有td max-width的情况下缩小越来越多。

在我的进一步测试中，我注意到对讲机显示：网格;影响表格下面会有多余的空间。但我必须这样做，因为否则我的风格就会被打破。

在这里你可以看到有多余的空间。注意滚动条的位置。

在这里你可以看到当我缩小屏幕以适应360px时，一切看起来都很好。注意滚动条位置。

所以我的ges是，不知何故，trackname文本将占用该空间，即使它适合更小的空间。