html - 如何在 Angular js 中使用 Bootstrap 样式修复表头(thead)

Question

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

我已经尝试使用 w3schools 的解决方案修复标题来修复我的 thead: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;
}

我希望至少在我的表格标题中添加修复后保持我的宽度。

提前致谢。

Answer 1

你可以尝试这样的事情:

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

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