Question

我想知道为什么我的td没有100％在我的桌子上。

此代码需要存在：

.table-scroll tbody {
  display: block;
  overflow-y: scroll;
  height: calc(100% - 130px);
}

当我使用显示块时会发生这种情况，无论如何我尝试了很多东西而且td仍未获得100％的表格

jsfiddle：https://jsfiddle.net/zuxq2gr0/1/

的CSS：

.panel-table {
  height:auto;
  width:300px;
  border: 1px solid red;
}

.table-scroll tbody {
    display:block;
    overflow-y: scroll;
    height: calc(100% - 130px);
}

HTML：

  <!doctype html>
    <html>
      <head>
        <title>Aurelia</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
        <meta name="viewport" content="width=device-width, initial-scale=1">
      </head>
      <body>
        <div class="panel-table">
          <table class="table table-scroll">
            <thead>
            </thead>
            <tbody>
              <tr>
                <td>Joseph</td>
              </tr>
              <tr>
                <td>Mary</td>
              </tr>
              <tr>
                <td>Judy</td>
              </tr>
              <tr>
                <td>Judy</td>
              </tr>
              <tr>
                <td>Judy</td>
              </tr>
              <tr>
                <td>Judy</td>
              </tr>
              <tr>
                <td>Judy</td>
              </tr>
              <tr>
                <td>Judy</td>
              </tr>
              <tr>
                <td>Judy</td>
              </tr>
              <tr>
                <td>Judy</td>
              </tr>
              <tr>
                <td>Judy</td>
              </tr>
              <tr>
                <td>Judy</td>
              </tr>
              <tr>
                <td>Judy</td>
              </tr>
              <tr>
                <td>Judy</td>
              </tr>
            </tbody>
          </table>
        </div>
      </body>

    </html>

Answer 1

您可以添加此样式：

.table-scroll tbody > tr {
  display: table;
  width: 100%;
}

这是更新的fiddle

为什么tbody需要display: block？你打破了表格布局，你会得到这样的奇怪行为。

Answer 2

只需设置＆＃39; tr＆＃39; as＆＃39; display：block＆＃39;它也应该有效

tr, td {
  display: block;
}

表td不是100％

2 个答案: