Tengo un problema con mi mesa. Esta tabla es primaria para teléfonos. Cuando tengo el teléfono en posición vertical, la tabla no muestra el hilo, pero cuando tengo el teléfono en posición horizontal, se muestra correctamente.

¿Alguien puede ayudarme a mostrar esta tabla correctamente en los teléfonos cuando el teléfono está en posición vertical?

body {
  font-family: "Open Sans", sans-serif;
  line-height: 1.25;
}

table {
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
  /*table-layout: fixed;*/
}

table caption {
  font-size: 1.5em;
  margin: .5em 0 .75em;
}

table tr {
  background: #f9f9f9;
  border: 1px solid #ddd;
  padding: .35em;
}

table tr:hover {
  background-color: #f5f5f5;
}

table th,
table td {
  padding: .625em;
  text-align: center;
}

table th {
  font-size: .85em;
  letter-spacing: .1em;
  text-transform: uppercase;
  background-color: #333333;
  color: #fff;
}

@media screen and (max-width: 600px) {
  table {
    border: 0;
  }
  table caption {
    font-size: 1.3em;
  }
  table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 60px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    display: block;
    width: 0px;
  }
  table tr {
    border-bottom: 3px solid #ddd;
    /*//spodok tabulky*/
    display: block;
    margin-bottom: .625em;
  }
  table td {
    border-bottom: 1px solid #ddd;
    /*Hrubka ciary medzi riadkam*/
    display: block;
    font-size: .8em;
    text-align: center;
    /*Pozicia textu*/
  }
  table td:before {
    /*
		* aria-label has no advantage, it won't be read inside a table
		content: attr(aria-label);
		*/
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  table td:last-child {
    border-bottom: 0;
  }
  table td:nth-child(even) {
    background-color: #f2f2f2;
  }
}
<table>
  <thead>
    <tr>
      <!--<th>Poradie</th>-->
      <th>Císlo zákazky</th>
      <th>Pozícia</th>
      <th>Poradové císlo</th>
      <th>Stav</th>
    </tr>
  </thead>
</table>

Gracias por su respuesta.

css
-2
Radoslav Rác 19 feb. 2018 a las 15:58

2 respuestas

La mejor respuesta

Esa es una solución simple. Elimina clip: rect(0 0 0 0); y width: 0px;. Esas líneas ocultan la thead completa porque la condición @media se activa en modo vertical (pantalla más estrecha).

Es posible que desee rehacer toda la sección @media de su css; en general, es un poco extraño. Tal vez agregue un par de detalles de lo que originalmente pretendía hacer en pantallas estrechas.

body {
  font-family: "Open Sans", sans-serif;
  line-height: 1.25;
}

table {
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
  /*table-layout: fixed;*/
}

table caption {
  font-size: 1.5em;
  margin: .5em 0 .75em;
}

table tr {
  background: #f9f9f9;
  border: 1px solid #ddd;
  padding: .35em;
}

table tr:hover {
  background-color: #f5f5f5;
}

table th,
table td {
  padding: .625em;
  text-align: center;
}

table th {
  font-size: .85em;
  letter-spacing: .1em;
  text-transform: uppercase;
  background-color: #333333;
  color: #fff;
}

@media screen and (max-width: 600px) {
  table {
    border: 0;
  }
  table caption {
    font-size: 1.3em;
  }
  table thead {
    border: none;
    height: 60px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    display: block;
  }
  table tr {
    border-bottom: 3px solid #ddd;
    /*//spodok tabulky*/
    display: block;
    margin-bottom: .625em;
  }
  table td {
    border-bottom: 1px solid #ddd;
    /*Hrubka ciary medzi riadkam*/
    display: block;
    font-size: .8em;
    text-align: center;
    /*Pozicia textu*/
  }
  table td:before {
    /*
		* aria-label has no advantage, it won't be read inside a table
		content: attr(aria-label);
		*/
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  table td:last-child {
    border-bottom: 0;
  }
  table td:nth-child(even) {
    background-color: #f2f2f2;
  }
}
<table>
  <thead>
    <tr>
      <!--<th>Poradie</th>-->
      <th>Císlo zákazky</th>
      <th>Pozícia</th>
      <th>Poradové císlo</th>
      <th>Stav</th>
    </tr>
  </thead>
</table>
0
Manfred Radlwimmer 19 feb. 2018 a las 13:06

Simplemente eliminemos las reglas de posición y visualización de thead.

Ahora podemos ver el thead. Luego puede agregar los estilos restantes.

Espero que esto sea lo que estabas buscando. Feliz de explicar o ayudar en una mejor solución si es necesario.

body {
  font-family: "Open Sans", sans-serif;
  line-height: 1.25;
}

table {
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
  /*table-layout: fixed;*/
}

table caption {
  font-size: 1.5em;
  margin: .5em 0 .75em;
}

table tr {
  background: #f9f9f9;
  border: 1px solid #ddd;
  padding: .35em;
}

table tr:hover {
  background-color: #f5f5f5;
}

table th,
table td {
  padding: .625em;
  text-align: center;
}

table th {
  font-size: .85em;
  letter-spacing: .1em;
  text-transform: uppercase;
  background-color: #333333;
  color: #fff;
}

@media screen and (max-width: 600px) {
  table {
    border: 0;
  }
  table caption {
    font-size: 1.3em;
  }
  table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 60px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    width: 0px;
  }
  table tr {
    border-bottom: 3px solid #ddd;
    /*//spodok tabulky*/
    display: block;
    margin-bottom: .625em;
  }
  table td {
    border-bottom: 1px solid #ddd;
    /*Hrubka ciary medzi riadkam*/
    display: block;
    font-size: .8em;
    text-align: center;
    /*Pozicia textu*/
  }
  table td:before {
    /*
		* aria-label has no advantage, it won't be read inside a table
		content: attr(aria-label);
		*/
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  table td:last-child {
    border-bottom: 0;
  }
  table td:nth-child(even) {
    background-color: #f2f2f2;
  }
}
<table>
  <thead>
    <tr>
      <!--<th>Poradie</th>-->
      <th>Císlo zákazky</th>
      <th>Pozícia</th>
      <th>Poradové císlo</th>
      <th>Stav</th>
    </tr>
  </thead>
</table>
0
Gerardo BLANCO 19 feb. 2018 a las 13:09