Html 表行未对齐

我有两张桌子在下面的小提琴里。行未与标题对齐。这是第一个表的代码

<table class=" table-bordered">
    <tr>
        <th>Doc Name:</th>
        <th>Atom Type:</th>
        <th>Cluster Method:</th>
        <th>k:</th>
        <th>
            <small>Stylistic Feature(s):</small>
        </th>
    </tr>
    <tr>
        <td style="font-size: 10px;">rowling_and_dickens</td>
        <td style="font-size: 10px;">sentence</td>
        <td style="font-size: 10px;">kmeans</td>
        <td style="font-size: 10px;">2</td>
        <td style="font-size: 10px;">hapax_dislegomena;honore_r_measure;hapax_legomena;</td>
    </tr>
</table>

文件名称：
原子类型：
聚类方法：
k:
风格特征：
罗琳和狄更斯
句子
K均值
2.
不合理行为；荣誉度量；hapax_legomena；

另一个表遵循类似的模式。由于空间不足，我不在这里添加它们

---

无论我做什么，我的表行都无法正确对齐。我已经研究了许多解决方案，并相应地修改了代码，但没有效果。请帮助我确定此处的错误。

要使列内容对齐，我们需要将其宽度设置为固定。目前，每个单元占用所需的空间。似乎第一列的宽度应该最小，第三列的宽度应该最宽。其他列的宽度可以相同，因为它们都包含5位数字。要设置不同的

td

宽度，我们可以为每个类使用不同的类，但可能会很混乱，因此我们将使用

nth-child（）

选择器，其如下所示：

td:nth-child(1) {
    width: 10%
}

<style>
  .container {
    margin-left: 0;
  }

  tbody {
    display: block;
    max-height: 500px;
    overflow-y: scroll;
  }

  thead,
  tbody tr {
    display: table;
    width: 100%;
  }

  thead {
    width: 100%;
  }

  table {
    width: 200px;
  }

  td:nth-child(1) {
    width:10%
  }

  td:nth-child(3) {
    width:30%
  }

</style>

这将父元素的第一个子元素的所有

td

元素的宽度设置为10%。您应该做的是将此添加到您的样式中，使其看起来像这样：

td:nth-child(1) {
    width: 10%
}

<style>
  .container {
    margin-left: 0;
  }

  tbody {
    display: block;
    max-height: 500px;
    overflow-y: scroll;
  }

  thead,
  tbody tr {
    display: table;
    width: 100%;
  }

  thead {
    width: 100%;
  }

  table {
    width: 200px;
  }

  td:nth-child(1) {
    width:10%
  }

  td:nth-child(3) {
    width:30%
  }

</style>

.集装箱{
左边距：0；
}
t车身{
显示：块；
最大高度：500px；
溢出y：滚动；
}
thead，
tbody tr{
显示：表格；
宽度：100%；
}
泰德{
宽度：100%；
}
桌子{
宽度：200px；
}
运输署：第n名儿童（1）{
宽度：10%
}
运输署：第n名儿童（3）{
宽度：30%
}

这意味着第一列将占车身宽度的10%，第三列将占30%，其他列各占20%。但是，如果这些数据也可以包含可变长度的数据，那么也应该为它们添加类似的规则

---

这样，列内容将与中心对齐。要设置不同的对齐方式，请使用

text align

属性。

为什么不设置

td

元素的宽度。数据是可变的，然后可以使用

nth-child（）

选择器使它们具有不同的宽度。很抱歉，我对这一点完全陌生。你能给我举个例子吗？你可能还想使用：table layout:fixed；如果每行有相同数量的单元格，那么这甚至可以在没有td宽度的情况下使用。它们将均匀分布。从你的小提琴演示。200px的宽度有点小，不是吗？