为什么表不是其父 div 的 100%答案

【问题标题】：Why is table not 100% of its parent div为什么表不是其父 div 的 100%
【发布时间】：2015-09-07 12:28:08
【问题描述】：

我有以下标记：

<div class="wrapper">
    <table>
        <tr><td>1</td></tr>
        <tr><td>1</td></tr>
        <tr><td>1</td></tr>
        <tr><td>1</td></tr>
        <tr><td>1</td></tr>
    </table>
</div>

还有 CSS：

.wrapper {
    height: 60px;
}

table {
    height: 100%;
    overflow: auto;
}

这里是fiddle。问题是table 没有选择.wrapper 的高度为60px。为什么？

【问题讨论】：

标签： html css

【解决方案1】：

<table> 默认为display: table。

设为display: block。

Demo

.wrapper {
  height: 60px;
}
table {
  height: 100%;
  overflow: auto;
  display: block;
}

<div class="wrapper">
  <table>
    <tr>
      <td>1</td>
    </tr>
    <tr>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
    </tr>
    <tr>
      <td>5</td>
    </tr>
    <tr>
      <td>6</td>
    </tr>
    <tr>
      <td>7</td>
    </tr>
    <tr>
      <td>8</td>
    </tr>
  </table>
</div>

【讨论】：

如果我什么都没失去，那么如果display:block 就足够了，那么拥有display:table 又有什么意义呢？
@Maximus 检查this，可能有帮助

【解决方案2】：

您应该将表格宽度设置为100%，因为默认表格宽度是auto。

table {
    width: 100%;
    height: 100%;
    overflow: auto;
}

jsfiddle

阅读more关于表格宽度的信息

【讨论】：