html - 表格不适用于父div

下面是我要做的一个例子（在div中放置一个表并使其填充div）：ex1_jsfiddle

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
  height: 100%;
  table-layout: fixed;
}
td,
th {
  border: 1px solid;
  text-align: left;
  padding: 0px 55px 0px 55px;
}
tr:nth-child(even) {
  background-color: lightgreen;
}
tr {
  margin-top: 0;
}
aside {
  background-color: lightblue;
  border: solid 2px;
  position: absolute;
  float: left;
  height: 100%;
  width: 15%;
}
#table_div {
  float: left;
  border: solid 2px;
  margin-left: 25%;
  height: 300px;
  width: 700px;
  border-color: red;
}

<aside>sidebar</aside>
<div id="table_div">
  <table>

    <tr>

      <th>Firstname</th>

      <th>Lastname</th>

      <th>Age</th>
      </tr>
    <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>80</td>
    </tr>
  </table>
</div>

问题是，正如您在ex1中看到的那样，表正在脱离父div。最奇怪的是，如果我用1个tab在<div_id="table_div>和</div>之间缩进元素，那么它只能在jsfiddle中工作：ex2_jsfiddle
当我在浏览器（chrome）中尝试时，它不起作用。
那么，有人能告诉我发生了什么事吗？

最佳答案

问题是你有一些字符。它们看起来是无害的空间，但实际上它们是non-breaking spaces（ ），而html不考虑space characters。

<div>IT WORKS!</div>

<aside>sidebar</aside>
<div id="table_div">
<table >
&nbsp; <tr>
&nbsp;&nbsp;&nbsp; <th>Firstname</th>
&nbsp;&nbsp;&nbsp; <th>Lastname</th>
&nbsp;&nbsp;&nbsp; <th>Age</th>
&nbsp; </tr>
  <tr>
    <td >Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>
</div>

这里不允许这些 ，所以解析器将它们移到表之前。这就产生了空行。

nbsp

html - 表格不适用于父div