ブラウザのサイズ変更時のHTMLテーブルセルの切り替え位置

Question

ブラウザのサイズを変更するときに、2つの列が位置を切り替える特定のテーブルがあります。

これは、（フィールド "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>