表格样式修改

src/components/Hotel/roomReservationsDetails.vue

@@ -28,6 +28,17 @@
     padding: 5px;
   }
 
+  .roomReservationsDetailsTalbe {
+    table-layout: fixed;
+  
+  }
+
+  .roomReservationsDetailsTalbe thead tr th {
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+  }
+
 </style>
 
 <template>
@@ -50,14 +61,15 @@
     <div style="width: 100%;  overflow-x: auto;padding-bottom: 10px; " :style="{height: boxHeight + 'px'}"
       class="ownScrollbarStyle" ref="ownScrollbarStyle">
       <table border="0" cellspacing="1" cellpadding="0" class="roomReservationsDetailsTalbe" v-loading="loading">
+        <thead>
           <tr>
-          <th class="fz14" colspan="5">
+            <th class="fz14" style="border:none;" >
               {{$t('visa.v_teaminfo')}}&nbsp;&nbsp;{{$t('leader.leader_Leader')}}:{{LeaderName}}
-            &nbsp;&nbsp;{{$t('leader.leader_Guide')}}:{{GuideName}}.</th>
-          <th class="fz14" colspan="17">
+              &nbsp;&nbsp;{{$t('leader.leader_Guide')}}: {{GuideName}} </th>
+            <th class="fz14"  style="border:none;">
               <el-tooltip class="item" effect="dark" content="批量上传手配书" placement="top-start"
                 style="float:left;margin-left:20px;">
-              <el-popover placement="bottom" popper-class="piliangPop" width="400" trigger="click"
+                <el-popover placement="bottom" popper-class="piliangPop" width="500" trigger="click"
                   v-model="isShowPiliangPop">
                   <table class="dmcSetTable roomReserSet" border="0" cellspacing="0" cellpadding="0">
                     <tr>
@@ -66,11 +78,12 @@
                     </tr>
                     <template v-for="(lItem,lIndex) in list">
                       <tr v-for="(subItem,subIndex) in lItem.HotelOrderList" :key="subIndex+lIndex">
-                      <td style="width:100px;">
+                        <td style="width:120px;">
                           {{lItem.UseTimeStr}}
                         </td>
                         <td style="width:280px;">
-                        <el-checkbox v-model="subItem.IsChecked" @change="MoreUpdate(subItem)">{{subItem.NewHotelName}}
+                          <el-checkbox v-model="subItem.IsChecked" @change="MoreUpdate(subItem)">
+                            {{subItem.NewHotelName}}
                           </el-checkbox>
                         </td>
                       </tr>
@@ -89,7 +102,7 @@
                   </el-button>
                 </el-popover>
               </el-tooltip>
-            <span style="margin-top:6px;display:inline-block;">{{$t('ground.dijiecaozuoxinxi')}}</span>
+          
 
               <el-tooltip class="item" effect="dark" content="批量修改" placement="top-start"
                 style="float:left;margin-left:20px;">
@@ -130,6 +143,10 @@
               </el-tooltip>
             </th>
           </tr>
+        </thead>
+      </table>
+      <table border="0" cellspacing="1" cellpadding="0" class="roomReservationsDetailsTalbe" v-loading="loading">
+        <thead>
           <tr>
             <th width="120">{{$t('hotel.table_CheckInDate')}}</th>
             <th width="180">{{$t('hotel.hotel_name')}}</th>
@@ -140,7 +157,6 @@
             <th width="100">{{$t('ground.fangjianleixing')}}</th>
             <th width="80">{{$t('ground.fangjian')}}<br />{{$t("ground.yudingshu")}}</th>
             <th width="80">{{$t('ground.yudingrenshu')}}</th>
-          <!-- <th width="80">尚差<br />房间数</th> -->
             <th width="80">{{$t('ground.danjiameiren')}}</th>
             <th width="80">{{$t('ground.mianjianrenshu')}}</th>
             <th width="80">{{$t('ground.jinexiaoji')}}</th>
@@ -154,6 +170,8 @@
             <th width="250">{{$t('ground.fukuanbzdth')}}</th>
             <th width="80">{{$t('system.table_operation')}}</th>
           </tr>
+        </thead>
+        <tbody>
           <template v-for="(item,index) in list">
             <template v-for="(subItem,subIndex) in item.HotelOrderList">
               <tr v-for="(childItem,childIndex) in subItem.OrderDetailsList">
@@ -193,7 +211,8 @@
                       </td>
                     </tr>
                   </table>
-                <span style="font-weight:bold;font-size:14px;">报价酒店：<font style="color:red;">{{subItem.OfferHotelName}}(
+                  <span style="font-weight:bold;font-size:14px;">报价酒店：<font style="color:red;">
+                      {{subItem.OfferHotelName}}(
                       {{subItem.OfferUnitPrice}}/人)</font></span>
                 </td>
                 <!-- 机位总数/(Y/E/F) -->
@@ -575,7 +594,8 @@
                     </el-tooltip>
                     <el-tooltip class="item" effect="dark" :content="$t('pub.addBtn')" v-if="subItem.OPState!=1"
                       placement="top-start">
-                    <el-button @click='AddHotel(item,subIndex)' icon="iconfont icon-tianjia" type="primary"></el-button>
+                      <el-button @click='AddHotel(item,subIndex)' icon="iconfont icon-tianjia" type="primary">
+                      </el-button>
                     </el-tooltip>
                     <el-tooltip v-if="item.HotelOrderList.length>1 && subItem.OPState!=1" class="item" effect="dark"
                       :content="$t('system.table_delete')" placement="top-start">
@@ -592,6 +612,7 @@
               </tr>
             </template>
           </template>
+        </tbody>
       </table>
       <div class="noDataNotice" v-if="list.length<1">
         <i class="iconfont icon-kong"></i>