为什么我的桌子旁边有一个随机空间？

Question

所以我正在尝试制作一个响应表，但出于某种原因，当我将单元格堆叠1x3时，整个表格左侧都有一个随机的空格。我似乎无法弄明白为什么......

https://codepen.io/asyi/pen/ybjOJa

DataContext

Answer 1

你有一个元素.table-display，它有水平填充和width: 100%，它使用标准的“内容框”框模型，以便将宽度推到100％+填充，并增加宽度向右推。

将box-sizing: border-box添加到该元素以包含指定宽度内的填充。你可以在任何地方添加它。就个人而言，我使用*, *:after, *:before { box-sizing: border-box; }，但您也可以将其添加到您指定width: 100%的媒体查询中。

@media (max-width: 767px) {

  .table-display {
    display: table;
    width: 100%;
    box-sizing: border-box;
  }

}