html - 表不适合父 div

Question

这是我正在尝试做的事情的示例(将表格放入 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。最奇怪的是，如果我缩进 <div_id="table_div> 之间的元素和 </div>有 1 个选项卡，但仅在 jsfiddle 中有效:ex2_jsfiddle

当我在我的浏览器 (Chrome) 中尝试时，它不起作用。

那么，有人可以向我解释一下这是怎么回事吗？

Answer 1

问题是您那里有一些 字符。看似无害的空格，其实是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>

这些   在那里是不允许的，因此解析器将它们移到表之前。这会产生该空行。