在调整浏览器大小时切换位置的HTML表格单元格

Question

我有一个特定的表格，其中当调整浏览器大小时，其中两列切换位置。

这是它的外观正常（注意域 “ID Vendedor” 和 “农布雷”）：

，这是它的外观调整大小时：

但是，这只发生在这个特定的表中，其他表正常工作。

这是HTML和CSS表：

@media (max-width: 768px) { 
 
    table.resp-table { 
 
    border: 0; 
 
    } 
 
    table.resp-table thead { 
 
    display: none; 
 
    } 
 
    table.resp-table tr { 
 
    border-top: 2px solid #222; 
 
    margin-bottom: 10px; 
 
    display: block; 
 
    } 
 
    table.resp-table td { 
 
    display: block; 
 
    text-align: right; 
 
    font-size: 13px; 
 
    position: static; 
 
    } 
 
    table.resp-table td:last-child { 
 
    border-bottom: 0; 
 
    } 
 
    table.resp-table td:before { 
 
    content: attr(data-label); 
 
    float: left; 
 
    text-transform: uppercase; 
 
    font-weight: bold; 
 
    } 
 
}

<div class="col-xs-12 pt-60-on-xs" ng-hide="addingVendedor || editingVendedor"> 
 
    <p class="lead text-warning text-center" ng-if="!vendedores.length">No hay Vendedores en Base de Datos</p> 
 
    <table class="table resp-table" ng-if="vendedores.length"> 
 
    <thead> 
 
     <tr> 
 
     <th>ID Vendedor</th> 
 
     <th>Nombre</th> 
 
     <th>Distribuidor</th> 
 
     <th>Cargo</th> 
 
     <th>C&oacute;digo</th> 
 
     <th>Fecha Registro</th> 
 
     <th>Editar/Borrar</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr ng-repeat="vendedor in vendedores | filter:filter.vendedor"> 
 
     <td data-label="Nombre">{{vendedor.id_vendedor}}</td> 
 
     <td data-label="ID Vendedor">{{vendedor.nombre}}</td> 
 
     <td data-label="Distribuidor"><span>{{vendedor.distribuidor.nombre}}</span> <strong>({{vendedor.distribuidor.id_distribuidor}})</strong> 
 
     </td> 
 
     <td data-label="Cargo">{{vendedor.cargo}}</td> 
 
     <td data-label="C&oacute;digo">{{vendedor.codigo || "N/A"}}</td> 
 
     <td data-label="Fecha Registro">{{vendedor.createdAt | date:'dd/MM/yy hh:mm:ss a'}}</td> 
 
     <td data-label="Editar/Borrar"> 
 
      <button class="btn btn-warning" ng-click="setEditVendedor(vendedor)"><span class="glyphicon glyphicon-pencil"></span> 
 
      </button> 
 
      <button class="btn btn-danger" ng-click="deleteVendedor(vendedor)"><span class="glyphicon glyphicon-remove"></span> 
 
      </button> 
 
     </td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

我试图寻找一个解决方案，这一点，但我没有发现任何东西。我希望你至少能指出我正确的方向来解决这个问题。

Answer 1

当您切换到移动视图时，使用伪元素生成标题，该伪元素查找元素上的data-label属性的内容;尤其是CSS的块：

table.resp-table td:before { 
    content: attr(data-label); 
    float: left; 
    text-transform: uppercase; 
    font-weight: bold; 
} 

的问题是data-label属性是南辕北辙的HTML，围绕交换他们和航向是正确的：

<td data-label="Nombre">{{vendedor.id_vendedor}}</td> 
<td data-label="ID Vendedor">{{vendedor.nombre}}</td> 

应该是：

<td data-label="ID Vendedor">{{vendedor.id_vendedor}}</td> 
<td data-label="Nombre">{{vendedor.nombre}}</td> 

@media (max-width: 768px) { 
 
    table.resp-table { 
 
    border: 0; 
 
    } 
 
    table.resp-table thead { 
 
    display: none; 
 
    } 
 
    table.resp-table tr { 
 
    border-top: 2px solid #222; 
 
    margin-bottom: 10px; 
 
    display: block; 
 
    } 
 
    table.resp-table td { 
 
    display: block; 
 
    text-align: right; 
 
    font-size: 13px; 
 
    position: static; 
 
    } 
 
    table.resp-table td:last-child { 
 
    border-bottom: 0; 
 
    } 
 
    table.resp-table td:before { 
 
    content: attr(data-label); 
 
    float: left; 
 
    text-transform: uppercase; 
 
    font-weight: bold; 
 
    } 
 
}

<div class="col-xs-12 pt-60-on-xs" ng-hide="addingVendedor || editingVendedor"> 
 
    <p class="lead text-warning text-center" ng-if="!vendedores.length">No hay Vendedores en Base de Datos</p> 
 
    <table class="table resp-table" ng-if="vendedores.length"> 
 
    <thead> 
 
     <tr> 
 
     <th>ID Vendedor</th> 
 
     <th>Nombre</th> 
 
     <th>Distribuidor</th> 
 
     <th>Cargo</th> 
 
     <th>C&oacute;digo</th> 
 
     <th>Fecha Registro</th> 
 
     <th>Editar/Borrar</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr ng-repeat="vendedor in vendedores | filter:filter.vendedor"> 
 
     <td data-label="ID Vendedor">{{vendedor.id_vendedor}}</td> 
 
     <td data-label="Nombre">{{vendedor.nombre}}</td> 
 
     <td data-label="Distribuidor"><span>{{vendedor.distribuidor.nombre}}</span> <strong>({{vendedor.distribuidor.id_distribuidor}})</strong> 
 
     </td> 
 
     <td data-label="Cargo">{{vendedor.cargo}}</td> 
 
     <td data-label="C&oacute;digo">{{vendedor.codigo || "N/A"}}</td> 
 
     <td data-label="Fecha Registro">{{vendedor.createdAt | date:'dd/MM/yy hh:mm:ss a'}}</td> 
 
     <td data-label="Editar/Borrar"> 
 
      <button class="btn btn-warning" ng-click="setEditVendedor(vendedor)"><span class="glyphicon glyphicon-pencil"></span> 
 
      </button> 
 
      <button class="btn btn-danger" ng-click="deleteVendedor(vendedor)"><span class="glyphicon glyphicon-remove"></span> 
 
      </button> 
 
     </td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>