html - div标签后的表格格式不同

Question

我有一张像

<table>
<tr>
<td>Name</td>
<td><Select ></select</td></tr>
</table>
<div>
</div>
<table>
<tr>
<td>Class</td>
<td><select></select></td></tr>
</table>

但是，与 div 之前的第一个表相比，我看到 div 后的表具有不同的格式。

例如，如果我们在浏览器中看到它看起来像：

名称----------选择列表( - represents space)

类--选择组合

类的选择组合的格式非常不同，与第一个表格相比，它提供的空间更少。我没有为表格应用任何样式。

无法在表格内插入 div。 *注意：空格由 - *指定

Answer 1

如果您不为表格和列指定特定宽度，它们只会增长到其内容的大小

您应该使用 css 设置它们的样式：

修复标记并添加类：

<table>
  <tr>
    <td class="title">Name</td>
    <td class="input"><Select ></select></td>
  <tr>
</table>
<div></div>
<table>
  <tr>
    <td class="title">Class</td>
    <td class="input"><Select ></select></td>
  <tr>
</table>

css

table {width:100%;}
table .title,
table .input {width:50%;}

例子

但是我不得不说表格是用于表格数据的，所以你不应该真的把断路器 div 放在那里（或者甚至使用表格，因为它看起来不像表格数据）

Answer 2

你应该使用<td>; <tr>所以尝试将您的代码修改为：

<table>
  <tr>
    <td>Name</td>
    <td><Select></select></td>
  <tr>
</table>
<div>
</div>
<table>
  <tr>
    <td>Class</td>
    <td><Select></select></td>
  <tr>
</table>