html - div - learn material design web

La tabla receptiva está ocultando columnas sin valores

Question

En una de mis páginas, tengo una tabla receptiva que cambia de diseño cuando el navegador se vuelve pequeño. Cuando las columnas en mi tabla tienen valores, todo funciona correctamente, como se muestra en este violín .

Sin embargo, cuando las columnas no tienen valores, algunas no aparecen en la versión pequeña del diseño de la tabla, como se muestra en este violín .

¿Qué me estoy perdiendo?

También he copiado el código requerido de la versión que no funciona a continuación:

@media only screen and (max-width: 760px),
 (min-device-width: 768px) and (max-device-width: 1024px) {
    /* Force table to not be like tables anymore */
    table, thead, tbody, th, td, tr { 
        display: block; 
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    thead tr { 
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    tr { border: 1px solid #ccc; }

    td { 
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee; 
        position: relative;
        padding-left: 50%; 
    }

    td:before { 
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%; 
        padding-right: 10px; 
        white-space: nowrap;
    }

    /* Label the data */
    td:nth-of-type(1):before { content: "MFG P/N"; }
    td:nth-of-type(2):before { content: "MFG Name"; }
    td:nth-of-type(3):before { content: "Part ID"; }
    td:nth-of-type(4):before { content: "Description"; }
    td:nth-of-type(5):before { content: "Cost"; }
    td:nth-of-type(6):before { content: "Price"; }
    td:nth-of-type(7):before { content: "On Hand"; }
    td:nth-of-type(8):before { content: "On Order"; }
    td:nth-of-type(9):before { content: "Allocated"; }
    td:nth-of-type(10):before { content: "Shipped"; }
    td:nth-of-type(11):before { content: "Report"; }
    td:nth-of-type(12):before { content: "RMA"; }
    td:nth-of-type(10):before { content: "File"; }
    td:nth-of-type(10):before { content: "Add Part"; }
}

Answer 1

Tu problema no es exactamente lo que estás describiendo. Al mirar su tabla en el violín de "ejemplo que no funciona", el resultado no muestra una serie de celdas de tabla vacías: no muestra celdas de tabla.

En cambio, estás produciendo:

<td valign="top" colspan="10" class="dataTables_empty">No data available in table</td>

Estás usando un truco de CSS bastante inteligente para mostrar el texto de la columna antes de cada una de tus celdas, lo cual te aplaudo, pero mi impresión es que realmente no entiendes cómo funciona el truco de CSS, por eso estás teniendo el error Déjame desglosarlo por ti, así que tiene sentido.

Su CSS se basa en usar el selector :nth-of-type(N) para anteponer algo de contenido frente a un <td> . Usted tiene 9 columnas en su grilla: Compañía , Cust.No , Contacto , Dirección , Teléfono , Correo Electrónico , Archivo , Fecha de Creación y Notas .

Cuando su página se encuentra por debajo de cierto ancho, en función de su consulta de medios, suceden las siguientes cosas:

thead tr { 
    position: absolute;
    top: -9999px;
    left: -9999px;
}

Este bloque mueve la etiqueta <thead> , que contiene los encabezados de las columnas de la tabla, fuera del espacio visible de la pantalla (10.000 píxeles arriba ya la izquierda del área visible).

table, thead, tbody, th, td, tr { 
    display: block; 
}
td { 
    /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid #eee; 
    position: relative;
    padding-left: 50%; 
}

Como dice el comentario, estos bloques deshabilitan la display: table predeterminada display: table representación CSS de la tabla y en su lugar comienzan a forzar a todos los elementos contenidos en ella para que muestren el block , lo que significa que cada elemento nuevo comenzará en una nueva línea de forma predeterminada. Esto es lo que hace que sus celdas aparezcan una encima de la otra dentro de una sola fila.

El padding-left: 50% en las etiquetas <td> es lo que obliga a mostrar sus datos comenzando en el centro de la tabla.

Ahora para la magia:

td:nth-of-type(1):before { content: "MFG P/N"; }

Esta línea dice ... "para cualquier etiqueta <td> , si es (1) th <td> dentro de su elemento padre, inyecte el texto ''MFG P / N'' en su :before pseudo-elemento."

El :before pseudo-elemento es un constructo de CSS que aparece fuera del DOM (no se puede ver en el margen de revisión o inspeccionando los elementos de la página), pero aún se representa en la pantalla. Presenta dentro del elemento al que se aplica (el <td> ). El siguiente CSS le dice cómo mostrar:

td:before { 
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 6px;
    left: 6px;
    width: 45%; 
    padding-right: 10px; 
    white-space: nowrap;
}

En otras palabras, dentro de la position: relative <td> parent, coloque el :before pseudo-element 6px desde el borde superior, y 6px desde el borde izquierdo, 6px 45% tan ancho como el <td> , etc.

Esto es lo que inyecta el "encabezado" en frente de sus filas.

Ahora para el problema :

Su HTML / JS está actualmente representando el siguiente HTML en su ejemplo que no funciona (simplificado para mostrar las partes importantes):

<table>
  <thead><!-- omitted because it is off-screen --></thead>
  <tbody>
    <tr class="odd">
      <td valign="top" colspan="10" class="dataTables_empty">
        No data available in table
      </td>
    </tr>
  </tbody>
</table>

Tenga en cuenta que solo hay una <td> dentro de su <tbody> . Esta es la razón por la que no está mostrando varias filas con múltiples encabezados anexados: solo hay una celda <td> la cual está actuando su CSS.

Si, en cambio, desea mostrar una serie de casillas vacías con los valores de encabezado requeridos, deberá cambiar el resultado de HTML a lo siguiente:

<table>
  <thead><!-- still omitted, because it still doesn''t matter --></thead>
  <tbody>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td><!-- 9 columns, to match your 9 headers -->
  </tbody>
</table>

Esto permitirá que sus reglas de CSS para :nth-of-type(1) hasta :nth-of-type(9) representen correctamente los encabezados requeridos, con el   (espacio sin interrupción) forzando a la tabla a mostrar las etiquetas <td> en todos los navegadores, proporcionando contenido "invisible".

Espero que esto ayude.

Una nota adicional:

Su CSS actual contiene un montón de basura que no necesita. Específicamente:

td:nth-of-type(10):before { content: "Shipped"; }
td:nth-of-type(11):before { content: "Report"; }
td:nth-of-type(12):before { content: "RMA"; }
td:nth-of-type(10):before { content: "File"; }
td:nth-of-type(10):before { content: "Add Part"; }

Los últimos 5 de tus :nth-of-type reglas :nth-of-type . Nunca se aplicarán, utilizando su diseño HTML actual, ya que solo tiene 9 columnas en su tabla.

Además, tienes 3 reglas separadas que se dirigen a :nth-of-type(10) ... esto significa que incluso si tuvieras una décima columna, solo la última de estas reglas ( "Add Part" ) va a ser aplicado, ya que anulará los dos anteriores.