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。最奇怪的是，如果我使用1个标签缩进<div_id="table_div>和</div>之间的元素，它仅适用于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>

这里不允许使用 ，因此解析器会在表之前移动它们。这会产生空行。

Answer 2

看起来在JSfiddle中，“无标签”版本（ex1_jsfiddle）在<div>和<table>之间注册了一个字符，因此推下了表格。

我在chrome中尝试它，它看起来像@ zer00ne评论。但是当我放一个空字符时，例如&nbsp，它看起来像你的ex1_jsfiddle

Answer 3

这里的解决方案！请将'#talbd_div'宽度更改为％

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

表格不适合父div

3 个答案: