表格不适合父级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> 之间的元素之间缩进了一个制表符，它就能工作，但仅限于 jsfiddle： ex2_jsfiddle 当我在浏览器（Chrome）中尝试时，它不起作用。

因此，有人可以解释一下发生了什么吗？

- CuriousGuy

---

我刚刚在本地使用Chrome加载它，看起来是这样的：http://imgur.com/0D6cAdN - zer00ne

你尝试在父级div上设置overflow:auto;了吗？ - dev7

Answer 1

问题在于您有一些 字符。它们看起来是无害的空格，但实际上它们是不间断空格（ ），而HTML不认为它们是空格字符。

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

这些   不被允许在那里出现，所以解析器会将它们移到表格前面。这就产生了那个空行。

- Oriol

---

你是怎么发现它们的？我正在使用Netbeans，并从w3 schools复制了表格代码，但它们显示为普通空格。我该如何将它们显示为&nbsp？ - CuriousGuy

@CuriousGuy 网站上的代码经常会被污染，以视觉上的美观为目的进行格式化，而不是可复制性。 - Mr Lister

@CuriousGuy 是的，很难注意到。特别是因为Firefox在复制时会将不间断空格转换为空格。我之所以注意到它们，是因为我选择了输出并使用了“查看选定源”，这在表格前显示了 。为了知道它们在源代码中的确切位置，我打开了控制台并使用了document.getElementById('id_code_html').value.split('\u00a0').join(' ')。 - Oriol

Answer 2

在JSFiddle中，"无选项卡"版本（ex1_jsfiddle）在<div>和<table>之间注册了一个字符，因此将表格向下推。我在Chrome中尝试了一下，正如@zer00ne所评论的那样。但是当我放置一个空字符，例如&nbsp，它看起来就像你的ex1_jsfiddle。

- Joshua H

Answer 3

这里是解决方案！请将 '#talbd_div' 的宽度改为百分比。

#table_div {
  float: left;
  border: solid 2px;
  padding-left: 15%;
  height: 300px;
  width: 80%;
  border-color: red;
}

- Srikanth Reddy