为什么表不是其父div的100％

Question

我有以下标记：

<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的{​​{1}}高度。为什么呢？

Answer 1

<table>默认为display: table。

将其设为display: block。

Demo

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

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

jsfiddle

阅读关于表格宽度的more