调整浏览器

Question

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

这就是它的正常表现（注意字段＆＃34; ID Vendedor＆＃34;和＃34; Nombre＆＃34;）：

这是调整大小后的样子：

然而，这只发生在这个特定的表中，其他表可以正常工作。

这是表格的HTML和CSS：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

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>

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;