员工行条纹颜色未覆盖全列及列对齐问题求助

方案1：修复原有栅格布局的条纹覆盖问题 #

你的核心问题是条纹背景没铺满所有列，本质是栅格列的默认间距或内边距截断了行背景，同时替换col-1为col会丢失固定宽度导致列对齐混乱。按以下步骤调整：

1. 给每行容器添加row g-0，移除列之间的默认间距，确保背景无缝覆盖：

   <div class="employee-row row g-0">
     <div class="col-1 border-cell dropdown">...</div>
     <div class="col-3 border-cell">...</div>
     <!-- 其他固定宽度列 -->
   </div>
   

2. 把交替背景直接作用在.employee-row上，同时调整列的边框样式，避免内边距截断背景：

   .employee-row:nth-child(even) {
     background-color: #f8f9fa;
   }
   .border-cell {
     border-left: 1px solid #dee2e6;
     border-right: 1px solid #dee2e6;
     padding: 0.5rem;
   }
   .employee-row:first-child .border-cell {
     border-top: 1px solid #dee2e6;
   }
   .employee-row:last-child .border-cell {
     border-bottom: 1px solid #dee2e6;
   }
   

3. 保留col-*固定宽度类（如col-1、col-3），不要替换为col，确保所有列宽度统一对齐。

方案2：Table重构的正确姿势 #

原生表格天然适配数据展示场景，更易实现行背景铺满和列对齐，按以下方式处理：

1. 用Bootstrap表格类快速实现交替条纹，自定义列宽避免布局混乱：

   <div class="table-container">
     <table class="table table-striped table-bordered">
       <thead>
         <tr>
           <th style="width: 8%">操作</th>
           <th style="width: 25%">姓名</th>
           <!-- 其他表头列 -->
         </tr>
       </thead>
       <tbody>
         <tr>
           <td class="dropdown">
             <button class="btn btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown">操作</button>
             <ul class="dropdown-menu">
               <li><a class="dropdown-item" href="#">编辑</a></li>
               <li><a class="dropdown-item" href="#">删除</a></li>
             </ul>
           </td>
           <td>张三</td>
           <!-- 其他数据单元格 -->
         </tr>
       </tbody>
     </table>
   </div>
   

2. 解决下拉菜单被表格裁剪的问题，给容器添加相对定位并调整层级：

   .table-container {
     position: relative;
     z-index: 1;
   }
   .dropdown-menu {
     z-index: 1000;
   }
   

3. 如需自定义条纹颜色，覆盖Bootstrap默认样式：

   .table-striped>tbody>tr:nth-of-type(even)>* {
     --bs-table-accent-bg: #f0f4f8;
   }
   

两种方案都能解决你的问题，推荐使用Table方案，它在数据展示场景下的布局兼容性和可维护性更强。

内容的提问来源于stack exchange，提问作者fawzan