브라우저의 크기를 재조정 할 때 HTML 표 셀 전환 위치

Question

브라우저의 크기를 조정할 때 두 개의 열이 위치를 전환하는 특정 테이블이 있습니다.

이것은 (필드 "ID Vendedor"와 "브레"주의) 일반적으로 모습입니다 :

을 그리고 이것은 크기를 조정할 때 모습입니다 :

그러나 이것은이 특정 테이블에서만 발생하며 다른 테이블은 정상적으로 작동합니다.

@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>

나는이에 대한 해결책을 찾기 위해 시도했지만 아무것도 발견하지 않았습니다 :

이 테이블에 대한 HTML 및 CSS입니다. 적어도이 문제를 해결할 수있는 올바른 방향으로 나를 안내 할 수 있기를 바랍니다.

Answer 1

모바일보기로 전환하면 표제는 요소의 data-label 속성의 내용을 찾는 의사 요소를 사용하여 생성됩니다. 특히 CSS의 블록 :

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

가되어야한다 :

를

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

문제는 주위를 교환하고 제목이 정확 것이라고 data-label 속성은 HTML에서 잘못 된 방식으로 둥근입니다

<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>