<div class="table-responsive">

This is an HTML code for a responsive table. It allows the table to adjust its size and layout according to the screen size of the device being used to view the page.

相关问题

在这个代码中再加一个类型，颜色和重量。<div class="container"> <div class="row"> <div class="col-md-12"> <div class="table-responsive"> <table class="table cart-table"> <thead> <tr> <th>商品</th> <th>单价</th> <th> 数 量 </th> <th>总价</th>

好的，可以根据您的需求在表格中再添加类型、颜色和重量等列。修改后的代码如下所示：

<div class="container">
<div class="row">
<div class="col-md-12">
<div class="table-responsive">
<table class="table cart-table">
<thead>
<tr>
<th>商品</th>
<th>单价</th>
<th>数量</th>
<th>类型</th>
<th>颜色</th>
<th>重量</th>
<th>总价</th>
</tr>
</thead>
<tbody>
<tr>
<td>商品1</td>
<td>10</td>
<td>2</td>
<td>类型1</td>
<td>红色</td>
<td>1kg</td>
<td>20</td>
</tr>
<tr>
<td>商品2</td>
<td>20</td>
<td>1</td>
<td>类型2</td>
<td>蓝色</td>
<td>500g</td>
<td>20</td>
</tr>
<tr>
<td>商品3</td>
<td>30</td>
<td>3</td>
<td>类型3</td>
<td>绿色</td>
<td>2kg</td>
<td>90</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>

bootstrap <div class="table-responsive" style="height: auto;"> <table class="table table-hover table-striped b-t b-light" style="display:block; max-height:800px;overflow-y: scroll;"> <thead> <tr> <th>序号</th> <th>工单</th> <th>条码</th> <th>型号</th> <th>资源</th> <th>设备编号</th> <th>工序</th> <th>工序中文描述</th> <th>建档日期</th> <th>结果</th> <th>不良代码</th> <th>不良代码明细</th> <th>备注</th> <th ng-repeat="item in fields">{{item.filedName}}</th> <th>建档人</th> </tr> </thead> <tbody > <tr ng-repeat="item in page"> <td>{{$index + 1}}</td> <td>{{item.gd}}</td> <td>{{item.sfc}}</td> <td>{{item.xh}}</td> <td>{{item.resourceId}}</td> <td>{{item.machineNo}}</td><!--等待乙方提供设备编号--> <td>{{item.opeationId}}</td> <td>{{item.operationName}}</td> <td>{{item.czDate}}</td> <td>{{item.flag}}</td> <td>{{item.ngCode}}</td> <td>{{item.ncDesc}}</td> <td>{{item.demo}}</td> <td ng-repeat="field in fields"> {{item[field.tableField]}} </td> <td>{{item.czUser}}</td> </tr> </tbody> </table> </div> 这个代码怎么固定表头做内容滚动

可以在表头部分添加固定样式，使其固定在页面顶部，然后设置表格内容的最大高度和垂直滚动条即可。具体代码如下：

<div class="table-responsive" style="height: auto;">
  <table class="table table-hover table-striped b-t b-light" style="display:block; max-height:800px;overflow-y: scroll;">
    <thead style="position: sticky; top: 0;">
      <tr>
        <th>序号</th>
        <th>工单</th>
        <th>条码</th>
        <th>型号</th>
        <th>资源</th>
        <th>设备编号</th>
        <th>工序</th>
        <th>工序中文描述</th>
        <th>建档日期</th>
        <th>结果</th>
        <th>不良代码</th>
        <th>不良代码明细</th>
        <th>备注</th>
        <th ng-repeat="item in fields">{{item.filedName}}</th>
        <th>建档人</th>
      </tr>
    </thead>
    <tbody style="height: 500px; overflow-y: auto;">
      <tr ng-repeat="item in page">
        <td>{{$index + 1}}</td>
        <td>{{item.gd}}</td>
        <td>{{item.sfc}}</td>
        <td>{{item.xh}}</td>
        <td>{{item.resourceId}}</td>
        <td>{{item.machineNo}}</td>
        <td>{{item.opeationId}}</td>
        <td>{{item.operationName}}</td>
        <td>{{item.czDate}}</td>
        <td>{{item.flag}}</td>
        <td>{{item.ngCode}}</td>
        <td>{{item.ncDesc}}</td>
        <td>{{item.demo}}</td>
        <td ng-repeat="field in fields"> {{item[field.tableField]}} </td>
        <td>{{item.czUser}}</td>
      </tr>
    </tbody>
  </table>
</div>

其中，`position: sticky; top: 0;`样式可以让表头固定在页面顶部，`height: 500px; overflow-y: auto;`样式可以设置表格内容的最大高度和垂直滚动条。