CODEWITHSUNDEEP
htmlcss
Jorge Corea
Jorge Corea

Reputation: 31

HTML table cells switching positions when resizing browser

I have a particular table in which, when resizing the browsers, two of the columns switch positions.

This is how it looks normally (notice the fields "ID Vendedor" and "Nombre"):

Desktop view

And this is how it looks when resized:

Mobile view

However this only happens in this particular table, other tables work as they should.

This is the HTML and CSS for the table:

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

I have tried to look for a solution to this but I haven't found anything. I hope you can at least point me in the right direction to fix this issue.

Upvotes: 1

Views: 318

Answers (1)

Hidden Hobbes
Hidden Hobbes

Reputation: 14183

When you switch to the mobile view the headings are generated using pseudo elements which look for the contents of the data-label attribute on the element; this block of CSS in particular:

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

The problem is the data-label attributes are the wrong way round in HTML, swap them around and the heading will be correct:

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

Should be:

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

Upvotes: 2

Related Questions