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