Display: blocco non funzionante in Chrome o Safari

Ho una semplice necessità di visualizzare le celle di una riga di tabella verticalmente. Funziona perfettamente con FF, ma non su Chrome o Safari sull'Ipad.Display: blocco non funzionante in Chrome o Safari

L'esempio seguente esegue il rendering come previsto in FF, con ogni cella di riga l'una sotto l'altra, ma in Chrome sembra ignorare il display: blocco del tutto.

Qual è il problema? O c'è un modo migliore per farlo.

(La ragione di questo è che vogliono im utilizzando @media nel CSS per rendere il tavolo diversamente per un piccolo schermo)

per un esempio più visiva:

Una tabella normale potrebbe essere

DATA1 | DATA2 | DATA3

ma con display: block, dovrebbe essere

DATA1 
DATA2 
DATA3

Molti Grazie

<html> 
<head> 
<style> 
    table, 
    thead, 
    tr, 
    td 
    { 
     display:block; 
    } 
    table,tr 
    { 
     border : 1px dotted red; 
    } 
    td 
    { 
     border:1px dashed blue; 
    } 
    thead 
    { 
     display:none; 
    } 
</style> 
</head> 
<body> 

<table> 
<thead> 
<tr> 
    <td>Heading 1</td> 
    <td>Heading 2</td> 
    <td>Heading 3</td> 
</tr> 
</thead> 
<tbody> 
<tr> 
    <td>Data 1</td> 
    <td>Data 2</td> 
    <td>Data 3</td> 
</tr> 
<tr> 
    <td>Data 1</td> 
    <td>Data 2</td> 
    <td>Data 3</td> 
</tr> 
<tr> 
    <td>Data 1</td> 
    <td>Data 2</td> 
    <td>Data 3</td> 
</tr> 

</tbody> 
</table> 

</body> 
</html>

fonte

2012-05-11 graemegets

Perché si stanno facendo le tabelle più complicato di quello che sono? Se vuoi visualizzare una singola tabella di colonne, quindi crea una sola tabella di colonne; non è necessario definirli con 'display: block;'. – Sparky

EDIT 2:

Credo di aver risolto il problema. Il kit Web sostituisce display: block; e lo calcola come display: table-cell; in un td quando non è stato specificato <!DOCTYPE> per il codice html.

Per risolvere questo problema, è consigliabile impostare <!DOCTYPE html> prima del <html> nella parte superiore dell'Html.

Il motivo per cui jsfiddle funzionerà è perché il sito ha già dichiarato un <!DOCTYPE>.

Prova questo e fammi sapere se risolve il tuo problema. Altrimenti cercherò di trovare un'altra risposta.

fonte

2012-05-11 18:13:46 frontendzzzguy

no, non quello che intendo.Ho aggiunto un esempio di testo di ciò che intendo per il testo principale. Fammi sapere di questo non è ancora chiaro. Grazie – graemegets

Ho aggiunto uno screenshot dei miei risultati in FF e Chrome. In quale versione di Chrome esegui il test? – frontendzzzguy

Sì, questo è quello che mi aspetto - ma in non eseguire mac - am su Windows. È interessante notare che il mio sviluppatore che ha scritto il codice (ed è in vacanza ora) sembra pensare che abbia funzionato e che sia su un Mac - quindi c'è una differenza tra Chrome su Mac e PC - anche se non funziona su Safari su un Ipad – graemegets

Tabella rotto in Chrome o Safari

molti casi si verifica in tabless.

display:block; 
display:"";

display:block; 
display:table-row; 
*display:block;

fonte

2013-03-04 10:28:17 StarMomo

ho fatto un trucco con l'utilizzo di th invece di TD. E un css hack che si applica solo ai safari (non al webkit generale).

HTML:

<table> 
    <tr> 
     <th>Cell 1</th> 
     <th>Cell 2</th> 
    </tr> 
</table>

CSS:

table { 
    width: 100%; 
    text-align: left; 
} 

/* Safari 7.1+ */ 
_::-webkit-full-page-media, _:future, :root .safari_only { 
    .safari-fix table tr { 
     display: block; 
     width: 100%; 
    } 
} 
/* Safari 10.1+ */ 
@media not all and (min-resolution:.001dpcm) { 
    @media { 
     .safari-fix table tr { 
      display: block; 
      width: 100%; 
     } 
    } 
} 

table th { 
    width: 100%; 
    display: block; 
}

Ecco il mio jsfiddle

fonte

2018-01-11 11:32:11 Chrisser

Display: blocco non funzionante in Chrome o Safari

risposta

Problemi correlati