如何在没有间距的情况下在表格中显示动态内容？

Question

我有一些名称是从我希望在html页面上显示的MySQL数据库中提取的。名称的数量和名称的长度各不相同，但它们必须全部适合页面上的固定宽度。

到目前为止，我将它们全部显示在一个表中，并且每当显示五个名称时我创建一个新行（参见显示虚拟名称的附图）。这不是太糟糕但是我觉得名字都在每个表格列的左边对齐。如何在没有固定间距的情况下显示靠近的名称，并在每次显示5个甚至6个名称时创建一个新行。

这是我的一段代码，展示了我是如何创建它的。

$t=0;
echo "<td><span class=\"label label-default\" id=\"tag\">$uname</span> </td>";
//Control width of table 
$t++;

if ($t=='5'){
echo '</tr><tr>';
$t=0;
}



        }//End foreach loop
echo '</tr></tbody></table>

Answer 1

选项1 - 父级：text-align:center;子级：display: inline-block;

＆＃13;

＆＃13;

.some-container {
  text-align: center;
}
.some-container span {
  display: inline-block;
}

/* below is just to style it up, so it looks closer to your picture */
.some-container {
  width: 70%;
  margin: 50px auto;
}
.some-container span {
  background-color: #aaa;
  color: white;
  padding: .5rem 1rem;
  margin: 2px;
  border-radius: 3px;
}

＆＃13;

<div class="some-container"><!--
  --><span>Lorem</span><!--
  --><span>ipsum</span><!--
  --><span>dolor</span><!--
  --><span>sit</span><!--
  --><span>amet</span><!--
  --><span>Lorem</span><!--
  --><span>ipsum</span><!--
  --><span>dolor</span><!--
  --><span>sit</span><!--
  --><span>sit</span><!--
  --><span>amet</span><!--
  --><span>Lorem</span><!--
  --><span>ipsum</span><!--
  --><span>dolor</span><!--
  --><span>sit</span><!--
  --><span>sit</span><!--
  --><span>amet</span><!--
  --><span>Lorem</span><!--
  --><span>ipsum</span><!--
  --><span>dolor</span><!--
  --><span>sit</span><!--
  --><span>sit</span><!--
  --><span>amet</span><!--
  --><span>Lorem</span><!--
  --><span>ipsum</span><!--
  --><span>dolor</span><!--
  --><span>sit</span><!--
  --><span>sit</span><!--
  --><span>amet</span><!--
  --><span>Lorem</span><!--
  --><span>ipsum</span><!--
  --><span>dolor</span><!--
  --><span>sit</span><!--
--></div>

＆＃13;

＆＃13;

＆＃13;

选项2 - flexbox（首选）

＆＃13;

＆＃13;

.some-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

/* below is just to style it up, so it looks closer to your picture */
.some-container {
  width: 70%;
  margin: 50px auto;
}
.some-container span {
  background-color: #aaa;
  color: white;
  padding: .5rem 1rem;
  margin: 2px;
  border-radius: 3px;
}

＆＃13;

<div class="some-container">
  <span>Lorem</span>
  <span>ipsum</span>
  <span>dolor</span>
  <span>sit</span>
  <span>amet</span>
  <span>Lorem</span>
  <span>ipsum</span>
  <span>dolor</span>
  <span>sit</span>
  <span>amet</span>
  <span>Lorem</span>
  <span>ipsum</span>
  <span>dolor</span>
  <span>sit</span>
  <span>amet</span>
  <span>Lorem</span>
  <span>ipsum</span>
  <span>dolor</span>
  <span>sit</span>
  <span>amet</span>
  <span>Lorem</span>
  <span>ipsum</span>
  <span>dolor</span>
  <span>sit</span>
  <span>amet</span>
  <span>Lorem</span>
  <span>ipsum</span>
  <span>dolor</span>
  <span>sit</span>
  <span>amet</span>
  <span>Lorem</span>
  <span>ipsum</span>
  <span>dolor</span>
  <span>sit</span>
  <span>amet</span>
</div>

＆＃13;

＆＃13;

＆＃13;

为什么2优于1：您会注意到我必须在html注释中包装所有空格（新行，制表符和缩进空格），以便正确显示第一个解决方案。这是因为浏览器将inline-block视为大字母。并且它们将元素之间的所有空白减少到一个单独的空间，这些空间在你的盒子之间呈现（除非你不像我那样评论它们）。解决方案2并不需要这个。
此外，flexbox具有更多可用的定位功能（即垂直居中，如果您为父级提供高度;或者在每一行上均匀分配自由空间，就像合理的段落一样）。

我是否说过你应该放弃<table>这个想法？这仅适用于表格数据（想想排序，分页）。不要用它来布局。如初。

Answer 2

如果必须在表格中，只需使用此CSS制作所有span元素块元素：

td > span {
  display: block;
} 

这样他们都被拉伸到其父元素（单元格）的宽度，不留空格（单元格边框除外）

http://codepen.io/anon/pen/ZLmjvy