/* * Tabelle responsive per i fondi che non hanno un _responsive_table.css dedicato * (ramo di default-template.xhtml: PVM, C01, B01, ...). * * Stessa tecnica dei file per gestore: sotto gli 800px la tabella smette di comportarsi * come tale, l'intestazione viene spostata fuori schermo e ogni cella espone la propria * etichetta tramite l'attributo data-title. * * Sono profilate solo le tabelle scritte a mano che valorizzano data-title. Restano fuori: * - le p:dataTable (ultimoMovimentoTable, posizioneMaturataTable, ...), che non emettono * data-title e vanno rese responsive con l'attributo reflow="true"; * - le tabelle senza data-title (tabellaContribuzioneDiv, tabellaPatrimonioMaturatoDiv, * divSezioneUpload, divElencoDistinteRiconciliate), che verrebbero solo impilate * senza etichetta. */ @media only screen and (max-width: 800px) { /* Force table to not be like tables anymore */ #ultimaDistintaInseritaDiv table, #ultimaDistintaInseritaDiv thead, #ultimaDistintaInseritaDiv tbody, #ultimaDistintaInseritaDiv th, #ultimaDistintaInseritaDiv td, #ultimaDistintaInseritaDiv tr, #distinteNonRiconciliateDiv table, #distinteNonRiconciliateDiv thead, #distinteNonRiconciliateDiv tbody, #distinteNonRiconciliateDiv th, #distinteNonRiconciliateDiv td, #distinteNonRiconciliateDiv tr, #bonificiNonRiconciliatiDiv table, #bonificiNonRiconciliatiDiv thead, #bonificiNonRiconciliatiDiv tbody, #bonificiNonRiconciliatiDiv th, #bonificiNonRiconciliatiDiv td, #bonificiNonRiconciliatiDiv tr, #dettaglioUsciteTable table, #dettaglioUsciteTable thead, #dettaglioUsciteTable tbody, #dettaglioUsciteTable th, #dettaglioUsciteTable td, #dettaglioUsciteTable tr, /* qui l'id e' sulla , non su un div contenitore */ #contributiVersatiTable, #contributiVersatiTable thead, #contributiVersatiTable tbody, #contributiVersatiTable th, #contributiVersatiTable td, #contributiVersatiTable tr, #lineeInvestimentoContribuzioneDiv table, #lineeInvestimentoContribuzioneDiv thead, #lineeInvestimentoContribuzioneDiv tbody, #lineeInvestimentoContribuzioneDiv th, #lineeInvestimentoContribuzioneDiv td, #lineeInvestimentoContribuzioneDiv tr, #lineeInvestimentoMontanteDiv table, #lineeInvestimentoMontanteDiv thead, #lineeInvestimentoMontanteDiv tbody, #lineeInvestimentoMontanteDiv th, #lineeInvestimentoMontanteDiv td, #lineeInvestimentoMontanteDiv tr, #listaBeneficiariDettaglioAdesioneDiv table, #listaBeneficiariDettaglioAdesioneDiv thead, #listaBeneficiariDettaglioAdesioneDiv tbody, #listaBeneficiariDettaglioAdesioneDiv th, #listaBeneficiariDettaglioAdesioneDiv td, #listaBeneficiariDettaglioAdesioneDiv tr, #divDettaglioVersamenti table, #divDettaglioVersamenti thead, #divDettaglioVersamenti tbody, #divDettaglioVersamenti th, #divDettaglioVersamenti td, #divDettaglioVersamenti tr, #divRiepilogoCollocatore01 table, #divRiepilogoCollocatore01 thead, #divRiepilogoCollocatore01 tbody, #divRiepilogoCollocatore01 th, #divRiepilogoCollocatore01 td, #divRiepilogoCollocatore01 tr, #listaElencoBonificiDiv table, #listaElencoBonificiDiv thead, #listaElencoBonificiDiv tbody, #listaElencoBonificiDiv th, #listaElencoBonificiDiv td, #listaElencoBonificiDiv tr, #divElencoBonificiRiconciliati table, #divElencoBonificiRiconciliati thead, #divElencoBonificiRiconciliati tbody, #divElencoBonificiRiconciliati th, #divElencoBonificiRiconciliati td, #divElencoBonificiRiconciliati tr, #listaAziende table, #listaAziende thead, #listaAziende tbody, #listaAziende th, #listaAziende td, #listaAziende tr { display: block; } /* Hide table headers (but not display: none;, for accessibility) */ #ultimaDistintaInseritaDiv thead tr, #distinteNonRiconciliateDiv thead tr, #bonificiNonRiconciliatiDiv thead tr, #dettaglioUsciteTable thead tr, #contributiVersatiTable thead tr, #lineeInvestimentoContribuzioneDiv thead tr, #lineeInvestimentoMontanteDiv thead tr, #listaBeneficiariDettaglioAdesioneDiv thead tr, #divDettaglioVersamenti thead tr, #divRiepilogoCollocatore01 thead tr, #listaElencoBonificiDiv thead tr, #divElencoBonificiRiconciliati thead tr, #listaAziende thead tr { position: absolute; top: -9999px; left: -9999px; } #ultimaDistintaInseritaDiv tr, #distinteNonRiconciliateDiv tr, #bonificiNonRiconciliatiDiv tr, #dettaglioUsciteTable tr, #contributiVersatiTable tr, #lineeInvestimentoContribuzioneDiv tr, #lineeInvestimentoMontanteDiv tr, #listaBeneficiariDettaglioAdesioneDiv tr, #divDettaglioVersamenti tr, #divRiepilogoCollocatore01 tr, #listaElencoBonificiDiv tr, #divElencoBonificiRiconciliati tr, #listaAziende tr { border: 1px solid #ccc; } /* * Solo le celle con data-title: quelle senza (righe "Distinte non presenti", * totali, colonne azione) restano a tutta larghezza invece di essere rientrate * del 50% sotto un'etichetta vuota. */ #ultimaDistintaInseritaDiv td[data-title], #distinteNonRiconciliateDiv td[data-title], #bonificiNonRiconciliatiDiv td[data-title], #dettaglioUsciteTable td[data-title], #contributiVersatiTable td[data-title], #lineeInvestimentoContribuzioneDiv td[data-title], #lineeInvestimentoMontanteDiv td[data-title], #listaBeneficiariDettaglioAdesioneDiv td[data-title], #divDettaglioVersamenti td[data-title], #divRiepilogoCollocatore01 td[data-title], #listaElencoBonificiDiv td[data-title], #divElencoBonificiRiconciliati td[data-title], #listaAziende td[data-title] { /* Behave like a "row" */ border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 50%; white-space: normal; text-align: left; } #ultimaDistintaInseritaDiv td[data-title]:before, #distinteNonRiconciliateDiv td[data-title]:before, #bonificiNonRiconciliatiDiv td[data-title]:before, #dettaglioUsciteTable td[data-title]:before, #contributiVersatiTable td[data-title]:before, #lineeInvestimentoContribuzioneDiv td[data-title]:before, #lineeInvestimentoMontanteDiv td[data-title]:before, #listaBeneficiariDettaglioAdesioneDiv td[data-title]:before, #divDettaglioVersamenti td[data-title]:before, #divRiepilogoCollocatore01 td[data-title]:before, #listaElencoBonificiDiv td[data-title]:before, #divElencoBonificiRiconciliati td[data-title]:before, #listaAziende td[data-title]:before { /* Now like a table header */ position: absolute; left: 6px; width: 45%; white-space: nowrap; text-align: left; font-weight: bold; } /* Label the data */ #ultimaDistintaInseritaDiv td[data-title]:before, #distinteNonRiconciliateDiv td[data-title]:before, #bonificiNonRiconciliatiDiv td[data-title]:before, #dettaglioUsciteTable td[data-title]:before, #contributiVersatiTable td[data-title]:before, #lineeInvestimentoContribuzioneDiv td[data-title]:before, #lineeInvestimentoMontanteDiv td[data-title]:before, #listaBeneficiariDettaglioAdesioneDiv td[data-title]:before, #divDettaglioVersamenti td[data-title]:before, #divRiepilogoCollocatore01 td[data-title]:before, #listaElencoBonificiDiv td[data-title]:before, #divElencoBonificiRiconciliati td[data-title]:before, #listaAziende td[data-title]:before { content: attr(data-title); } }