在調整瀏覽器大小時切換位置的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>