CSS我的表看起来很奇怪

Question

我有一个有这种造型的桌子：

table, td, tr, th {
border-color: #FFF;
width: 99%;
margin: 0 auto;
}

和我的表第一列有很多空间，这是从其他列中删除的，我的问题是如何解决这个问题？

我正在使用display属性，就像这样display:flex它有点工作，期望数据越过边界，出现另一个奇怪的边界。

他是我的小提琴http://jsfiddle.net/jsuske/jsyoeLd5/1/，但它并没有最好地展示我的问题。

Answer 1

<强> JSFiddle

你不需要那一切。这里：

body{
    background-color:#000;
    color:#FFF;
}

table, td, tr, th {
    border-color: #FFF;
}
td{
    padding:5px;
}

Answer 2

代码的编写方式，每个table，td，tr和th都试图达到其父代宽度的99％ 。连续的所有td或th都不能有99％的宽度 - 它们的宽度总和需要加起来达到100％。否则，第一项，例如td中的第一个tr将尝试99％宽，因此它会占用尽可能多的空间。

尝试一下：

table {
  width: 99%; /* Not necessary */
  margin: 0 auto; /* Not necessary */
}

table, td, tr, th {
  border-color: #fff;
}