Wyświetlacz: Blokowanie nie działa w przeglądarce Chrome lub Safari

Mam prostą potrzebę wyświetlania w pionie komórek wiersza tabeli. Działa to dobrze w FF, ale nie w Chrome ani Safari na iPadzie.Wyświetlacz: Blokowanie nie działa w przeglądarce Chrome lub Safari

Poniższy przykład renderuje się zgodnie z oczekiwaniami w FF, z każdą komórką wiersza pod sobą, ale w Chrome wydaje się zignorować ekran: zablokuj całkowicie.

Co to jest problem - czy jest lepszy sposób na zrobienie tego.

(Powodem tego jest to, że chce im przy @media w CSS czyni tabeli inaczej na małym ekranie)

bardziej wizualnej przykład:

Zwykłe tabela może być

DATA1 | DATA2 | DATA3

ale z display: block, powinno być

DATA1 
DATA2 
DATA3

Wiele Dzięki

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

Źródło

2012-05-11 graemegets

Dlaczego robisz tabele bardziej skomplikowane niż one? Jeśli chcesz wyświetlić tabelę z jedną kolumną, po prostu stwórz tabelę pojedynczej kolumny; nie ma potrzeby definiowania ich za pomocą 'display: block;'. – Sparky

EDIT 2:

myślę, że wypracowaliśmy swój problem. Pakiet Webkit przesłania kod display: block; i oblicza go jako display: table-cell; w td, gdy nie ma zadeklarowanej wartości <!DOCTYPE> dla twojego html.

Aby to naprawić, zalecamy ustawienie <!DOCTYPE html> przed <html> u góry html.

Powodem, dla którego jsfiddle zadziała, jest fakt, że witryna ma już zadeklarowaną <!DOCTYPE>.

Spróbuj tego i daj mi znać, jeśli rozwiąże problem. Jeśli nie, spróbuję znaleźć inną odpowiedź.

Źródło

2012-05-11 18:13:46 frontendzzzguy

nie, nie to mam na myśli.Dodałem tekstowy przykład tego, co mam na myśli w tekście głównym. Daj mi znać o tym, wciąż nie jest jasne. Dzięki – graemegets

Dodałem zrzut ekranu z moich wyników w FF i Chrome. W której wersji Chrome testujesz? – frontendzzzguy

Tak, właśnie tego oczekuję - ale nie w macu - w oknach. Co ciekawe, mój programista, który napisał kod (i jest teraz na wakacjach) wydaje się, że to zadziałało i jest na Macu - więc jest różnica między Chrome na Macu i PC - choć nie działa również na Safari na iPadzie – graemegets

Tabela uszkodzony w Chrome lub Safari

Wiele przypadek występuje w beztabelkowy.

display:block; 
display:"";

lub

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

Źródło

2013-03-04 10:28:17 StarMomo

ja zrobiłem trick z użyciem th, zamiast td. I css hack, który dotyczy tylko safari (a nie Webkita).

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

Oto moja jsfiddle

Źródło

2018-01-11 11:32:11 Chrisser

Wyświetlacz: Blokowanie nie działa w przeglądarce Chrome lub Safari

Odpowiedz

Powiązane problemy