如何在 Angular js 中使用引导样式修复表头（头）答案

【问题标题】：How to fix table header (thead) using boostrap styling in angular js如何在 Angular js 中使用引导样式修复表头（头）
【发布时间】：2019-12-24 22:41:23
【问题描述】：

我想使用 Boostrap 样式修复我的 AngularJS 网页的标题。我已经寻找了太多的解决方案，但似乎没有一个能正常工作。有人有简单的方法吗？另外问题是当我尝试添加修复时，宽度会发生变化并且与 tbody 不同。

我尝试使用 w3schools 的解决方案来修复我的头：https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sticky_header

我还没有成功地使用 AngularJS 指令寻找解决方案。

这是我的代码：

<table class="table table-responsives table-striped table-hover" ts-wrapper
                        ts-no-data-text="No se encontró nada con ese criterio de búsqueda">
                        <thead id="myHeader" class="sticky: sticky">
                            <tr>
                                <th>Semana</th>
                                <th>Fecha</th>
                                <th>Operador</th>
                                <th>Empresa</th>
                                <th>Unidad</th>
                                <th>Origen</th>
                                <th>Destino</th>
                                <th>Flete (MXN)</th>
                                <th>Opciones</th>
                            </tr>
                        </thead>
                        <tbody>

                            <tr ng-repeat="p in viajes" ts-repeat>
                                <td>{{p.data.semana}}</td>
                                <td>{{p.data.fecha | date:'yyyy-MM-dd'}}</td>
                                <td>{{p.data.operador.data.nombre}}</td>
                                <td>{{p.data.empresa}}</td>
                                <td> <strong>Tipo de Unidad:</strong> {{p.data.unidad.data.tipo}} <br>
                                    <strong>Tracto:</strong> {{p.data.unidad.data.tracto.placas}} |
                                    {{p.data.unidad.data.tracto.modelo}} |
                                    {{p.data.unidad.data.tracto.marca}} <br>
                                    <strong>Caja:</strong> {{p.data.unidad.data.caja.placas}} |
                                    {{p.data.unidad.data.caja.modelo}} |
                                    {{p.data.unidad.data.caja.marca}}</td>
                                <td>{{p.data.origen}}</td>
                                <td>{{p.data.destino}}</td>
                                <td>$ {{p.data.flete|number}}</td>

                                <td>
                                    <button class="btn btn-circle btn-assertive" ng-click="editarViaje(p)">
                                        <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
                                    </button>
                                    <!-- <button class="btn btn-circle btn-danger" ng-click="eliminarUsuario(p)">
                                        <i class="fa fa-times" aria-hidden="true"></i>
                                    </button> -->
                                </td>
                            </tr>
                        </tbody>
                    </table>

CSS: 
/* Module Table */
.sticky {
  position: fixed;
  top: 0;
}

我希望在为我的表头添加修复后至少保持我的宽度。

提前致谢。

【问题讨论】：

标签： html css angularjs bootstrap-4

【解决方案1】：

你可以试试这样的：

tbody{
  display:block;
  overflow:auto;
  height:200px;
  width:100%;
}
thead tr{
  display:block;
}

通过将tbody 的高度控制为固定的 200px（或您想要的任何值），然后设置溢出属性，我相信这将解决问题

【讨论】：