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          

​

<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>

​