您好我正在创建标头固定表。我想制作一个表格，其中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高度的位置。
% 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;
答案 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;
}