当在＆＃39;％＆＃39;中给出高度时，Tbody不会出现在整页上

时间：2017-06-16 12:13:11

标签： html css html-table

您好我正在创建标头固定表。我想制作一个表格，其中tbody将随着屏幕尺寸扩展，所以我想以百分比core.es5.js:1290 ERROR Error: Uncaught (in promise): Error: InvalidPipeArgument: '' for pipe 'AsyncPipe' Error: InvalidPipeArgument: '' for pipe 'AsyncPipe' at invalidPipeArgumentError (http://localhost:3000/vendor.bundle.js:86006:12) [angular] at AsyncPipe._selectStrategy (http://localhost:3000/vendor.bundle.js:86151:15) [angular] at AsyncPipe._subscribe (http://localhost:3000/vendor.bundle.js:86137:31) [angular] at AsyncPipe.transform (http://localhost:3000/vendor.bundle.js:86115:22) [angular] at Object.View_PackagesComponent_0.co [as updateDirectives] (ng:///PackagesModule/PackagesComponent.ngfactory.js:787:66) [angular] at Object.debugUpdateDirectives [as updateDirectives] (http://localhost:3000/vendor.bundle.js:13333:21) [angular] at checkAndUpdateView (http://localhost:3000/vendor.bundle.js:12671:14) [angular] at callViewAction (http://localhost:3000/vendor.bundle.js:13034:21) [angular] at execComponentViewsAction (http://localhost:3000/vendor.bundle.js:12966:13) [angular] at checkAndUpdateView (http://localhost:3000/vendor.bundle.js:12677:5) [angular] at callWithDebugContext (http://localhost:3000/vendor.bundle.js:13733:42) [angular] at Object.debugCheckAndUpdateView [as checkAndUpdateView] (http://localhost:3000/vendor.bundle.js:13273:12) [angular] at ViewRef_.detectChanges (http://localhost:3000/vendor.bundle.js:10745:63) [angular] at RouterOutlet.activateWith (http://localhost:3000/vendor.bundle.js:93091:42) [angular] at ActivateRoutes.placeComponentIntoOutlet 给出高度，但它不能正常工作。但是，当我以像素为单位时，它可以工作这是Jsfiddle的链接。我试图在%中提供tbody高度的位置。

＆＃13;
＆＃13; 
%
＆＃13; 
      table {
            width: 100%;
            height:100%;
        }

        thead, tbody, tr, td, th { display: block; }

        tr:after {
            content: ' ';
            display: block;
            visibility: hidden;
            clear: both;
        }

        thead th {
            height: 30px;

            /*text-align: left;*/
        }

        tbody {
            height: 125px;
            overflow-y: auto;
        }

        thead {
            /* fallback */
        }


        tbody td, thead th {
            width: 19.2%;
            float: left;
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

更新css部分

tbody {
  height: 100vh; /*add this */
  overflow-y: auto;
}

工作小提琴

<强> fiddle link 

thead,
tbody,
tr,
td,
th {
  display: block;
}

tr:after {
  content: ' ';
  display: block;
  visibility: hidden;
  clear: both;
}

thead th {
  height: 30px;
  /*text-align: left;*/
}

tbody {
  height: 100vh;
  overflow-y: auto;
}

thead {
  /* fallback */
}

tbody td,
thead th {
  width: 19.2%;
  float: left;
}
   <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<table class="table table-striped">
  <thead>
    <tr>
      <th>Make</th>
      <th>Model</th>
      <th>Color</th>
      <th>Year</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="filterable-cell">Ford</td>
      <td class="filterable-cell">Escort</td>
      <td class="filterable-cell">Blue</td>
      <td class="filterable-cell">2000</td>
    </tr>
    <tr>
      <td class="filterable-cell">Ford</td>
      <td class="filterable-cell">Escort</td>
      <td class="filterable-cell">Blue</td>
      <td class="filterable-cell">2000</td>
    </tr>
    <tr>
      <td class="filterable-cell">Ford</td>
      <td class="filterable-cell">Escort</td>
      <td class="filterable-cell">Blue</td>
      <td class="filterable-cell">2000</td>
    </tr>
    <tr>
      <td class="filterable-cell">Ford</td>
      <td class="filterable-cell">Escort</td>
      <td class="filterable-cell">Blue</td>
      <td class="filterable-cell">2000</td>
    </tr>
    <tr>
      <td class="filterable-cell">Ford</td>
      <td class="filterable-cell">Escort</td>
      <td class="filterable-cell">Blue</td>
      <td class="filterable-cell">2000</td>
    </tr>
    <tr>
      <td class="filterable-cell">Ford</td>
      <td class="filterable-cell">Escort</td>
      <td class="filterable-cell">Blue</td>
      <td class="filterable-cell">2000</td>
    </tr>
    <tr>
      <td class="filterable-cell">Ford</td>
      <td class="filterable-cell">Escort</td>
      <td class="filterable-cell">Blue</td>
      <td class="filterable-cell">2000</td>
    </tr>
    <tr>
      <td class="filterable-cell">Ford</td>
      <td class="filterable-cell">Escort</td>
      <td class="filterable-cell">Blue</td>
      <td class="filterable-cell">2000</td>
    </tr>
    <tr>
      <td class="filterable-cell">Ford</td>
      <td class="filterable-cell">Escort</td>
      <td class="filterable-cell">Blue</td>
      <td class="filterable-cell">2000</td>
    </tr>
    <tr>
      <td class="filterable-cell">Ford</td>
      <td class="filterable-cell">Escort</td>
      <td class="filterable-cell">Blue</td>
      <td class="filterable-cell">2000</td>
    </tr>
    <tr>
      <td class="filterable-cell">Ford</td>
      <td class="filterable-cell">Escort</td>
      <td class="filterable-cell">Blue</td>
      <td class="filterable-cell">2000</td>
    </tr>
    <tr>
      <td class="filterable-cell">Ford</td>
      <td class="filterable-cell">Escort</td>
      <td class="filterable-cell">Blue</td>
      <td class="filterable-cell">2000</td>
    </tr>
    <tr>
      <td class="filterable-cell">Ford</td>
      <td class="filterable-cell">Escort</td>
      <td class="filterable-cell">Blue</td>
      <td class="filterable-cell">2000</td>
    </tr>
    <tr>
      <td class="filterable-cell">Ford</td>
      <td class="filterable-cell">Escort</td>
      <td class="filterable-cell">Blue</td>
      <td class="filterable-cell">2000</td>
    </tr>
    <tr>
      <td class="filterable-cell">Ford</td>
      <td class="filterable-cell">Escort</td>
      <td class="filterable-cell">Blue</td>
      <td class="filterable-cell">2000</td>
    </tr>
    <tr>
      <td class="filterable-cell">Ford</td>
      <td class="filterable-cell">Escort</td>
      <td class="filterable-cell">Blue</td>
      <td class="filterable-cell">2000</td>
    </tr>
    <tr>
      <td class="filterable-cell">Ford</td>
      <td class="filterable-cell">Escort</td>
      <td class="filterable-cell">Blue</td>
      <td class="filterable-cell">2000</td>
    </tr>
    <tr>
      <td class="filterable-cell">Ford</td>
      <td class="filterable-cell">Escort</td>
      <td class="filterable-cell">Blue</td>
      <td class="filterable-cell">2000</td>
    </tr>
    <tr>
      <td class="filterable-cell">Ford</td>
      <td class="filterable-cell">Escort</td>
      <td class="filterable-cell">Blue</td>
      <td class="filterable-cell">2000</td>
    </tr>
    <tr>
      <td class="filterable-cell">Ford</td>
      <td class="filterable-cell">Escort</td>
      <td class="filterable-cell">Blue</td>
      <td class="filterable-cell">2000</td>
    </tr>

  </tbody>

</table>

答案 1 :(得分：0)

你不能使用tbody作为100％高度，因为“没有”并且是空白的，你需要为内容本身添加100％的高度，这是td。 如果你想要修复tbody你就可以做到这个例子：125px高度是125个可用像素，所有内容都可以在125px中滚动。 更改tbody并添加tbody tr td，如下所示。 

tbody  {  
        overflow-y: auto;
    }

并添加

tbody tr td  {  
        height: 100%;
        overflow-y: auto;
    }
相关问题
最新问题