È possibile creare elementi di tabella IE 9 (o precedenti) come se fossero normali: elementi di blocco?

In WebKit, Firefox e Opera, è possibile impostare i vari elementi di una tabella a display: block per fermare la loro visualizzazione come tavoli:È possibile creare elementi di tabella IE 9 (o precedenti) come se fossero normali: elementi di blocco?

http://jsfiddle.net/bHzsC/

Questo può essere utile su schermi più piccoli (ad esempio iPhone) che non avere spazio per visualizzare i tavoli disposti tradizionalmente.

IE 9, tuttavia, espone orizzontalmente le celle di tabella una accanto all'altra - non sembra onorare display: block sugli elementi della tabella.

C'è qualche altro codice che impedirà IE 9 (o precedente) di disporre tabelle come tabelle?

fonte

2012-04-03 Paul D. Waite

Una domanda simile da molto tempo fa: http://stackoverflow.com/a/5091822/405015. Semplicemente non funzionerà in IE7, se speri di poterlo supportare. 'dimensionamento della scatola: border-box' sarà utile se si ha a che fare con' padding'. – thirtydot

@thirtydot heh, sì l'ho appena trovato. Ho guardato prima, ma stavo cercando con _IE9_ e non solo IE. Hai appena ottenuto un +1 per la tua risposta alla vecchia domanda :-) – andyb

@andyb: È strano che tu abbia trovato più delle mie vecchie risposte pertinenti di quanto non avessi io :) – thirtydot

Aggiunta float:left;clear:left; farà IE 9 comportarsi un po 'meglio, ma la larghezza di ogni elemento non sarà corretta. Se aggiungi il mix width:100%, sembra comportarsi come in Chrome e Firefox.

table, 
thead, 
tfoot, 
tbody, 
tr, 
th, 
td { 
    display:block; 
    width:100%; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    float:left; 
    clear:left; 
}

Edit: Questo è stato chiesto prima How can I make "display: block" work on a <td> in IE? e parzialmente coperta sul How can I get inline-block to render consistently when applied to table cells? che giustamente menziona che qualsiasi imbottitura farà sì che il width:100% per creare una barra di scorrimento orizzontale. Tuttavia, ciò può essere evitato con box-sizing:border-box; o utilizzando una larghezza opportunamente inferiore o contenente un elemento con una larghezza fissa.

fonte

2012-04-03 09:28:38 andyb

+1 - Non avevo pensato alla larghezza. Non hai però bisogno di 'display: block'. Il 'float' si prende cura di questo per te! –

Inoltre, da dove viene la tua immagine del profilo? Lo riconosco da un gioco che giocavo da piccolo ma non ricordo il nome. Sono sicuro che sia stato l'attacco di qualcosa ... –

@ MyHeadHurts Ah, ma la larghezza causerà problemi con la barra di scorrimento se si utilizza il padding. Inoltre, foto del profilo di [Day of the Tentacle] (http://en.wikipedia.org/wiki/Day_of_the_tentacle) :-) – andyb

ne dite:

table, 
thead, 
tfoot, 
tbody, 
tr, 
th, 
td { 
    float:left; 
    clear: left; 
}

Potrebbe avere ripercussioni sul layout con esso usando floats

esempio di lavoro: http://jsfiddle.net/bHzsC/1/

fonte

2012-04-03 09:17:38

È possibile creare elementi di tabella IE 9 (o precedenti) come se fossero normali: elementi di blocco?

risposta

Problemi correlati