html表中td的等空间

Question

我有一个像下面这样的html表，我想让td空格相等。第一个name Jean Claud Anita Goth很长，推开了grade 5。应该包裹长名称。

现在的样子

 Name              Class
 Frew Amamde          5        
    Jean Claud Anita Goth       5

我想要什么

 Name              Class
 Frew Amamde          5        
 Jean Claud Anita     5
 Goth          

HTML

<table class="table" id="tables">
  <thead>
    <tr>
      <th></th>
      <th>Name</th>
      <th>Class</th>
    </tr>
  </thead>
  <tbody>
    <td>Jean Claud Anita Goth</td>
    <td>grade 5</td>

    <td>Frew Amamde</td>
    <td>grade 5</td>

  </tbody>
</table>

Answer 1

这是由于HTML代码中的错误：空的th元素（要删除）以及标题下方行（要添加）的缺失tr标记：

th {
text-align: left;
}
td, th {
padding: 0px 10px;
}

<table class="table" id="tables">
  <thead>
    <tr>
      <th>Name</th>
      <th>Class</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jean Claud Anita Goth</td>
      <td>grade 5</td>
    </tr>
    <tr>
      <td>Frew Amamde</td>
      <td>grade 5</td>
    </tr>
  </tbody>
</table>