Html 我的桌子看起来很奇怪

我有一张这种样式的桌子：

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

我的表中第一列有很多空间，这会占用其他列的空间，我的问题是如何解决这个问题

我在玩display属性，比如display:flex，它有点工作，如果数据越过边界，就会出现另一个奇怪的边界

---

他是我的提琴，但它没有给出我问题的最佳视图。

您的代码编写方式，每个表，td、tr和th都试图达到其父表宽度的99%。一行中的所有tds或TH不能有99%的宽度，它们的宽度之和必须加起来为100%。否则，第一个项目，例如tr中的第一个td，将尝试99%的宽度，因此将尽可能占用空间

尝试一下：

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

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

你不需要这些。在这里：

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

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

---

你用的是什么浏览器？我看不出使用Chrome有任何问题，很明显，所有的东西都被压扁了，但是所有的列对我来说都是相等的。你的第一列中的数据在几行中变大了，还是你在提琴中显示的总是7个字符的字符串？不，它们总是7个字符长，我也在使用谷歌chromelook。这有什么问题？我已经更新了我的提琴，以包含更多的css：这仍然没有工作，第一列仍然比其他列长，其长度仅为7个字符的文本对齐：中心到表格，td，tr，th修复了我的问题。没有必要像这样指定宽度百分比。就像：@2L84F8我同意。我在CSS中添加了注释。我只是想说明CSS的哪些部分可能导致宽度不一致。