2012-11-15 3 views
6

Sto cercando di creare una tabella come questa:wikitable sfondo sanguinante

{| class="wikitable" style="background:#F00;" 
|- 
! colspan="3" | Title 
|- 
! style="border-width:1px 0px; width:20px" | A 
! style="border-width:1px 0px;" | [[A]] 
! style="border-left-width:0px; width:20px" | A 
|- 
| colspan="3" | Text 
|} 

Tuttavia, il fondo rosso "sanguina" a destra. cioè, a destra del bordo destro del tavolo, c'è una striscia verticale di rosso.

Dopo un'osservazione più approfondita con gli Strumenti per sviluppatori, ciò è dovuto al fatto che i paddings delle celle sono impostati su 0.2em, e sono (stranamente) non arrotondati ai pixel interi, con un riempimento di 2.54999 px. Il browser quindi esegue il rendering della casella di tabella all'esterno del bordo destro.

Questo può essere risolto singolarmente dando alle celle una spaziatura basata su px. Ma questo complica il codice, quindi sto cercando una soluzione migliore.


MODIFICA: Si noti anche che il comportamento "non arrotondato" è causato dalla classe "wikitable". Ho provato a rimuovere la classe e gli imbottiti sono arrotondati.

EDIT2:. Ulteriori esperimenti dimostrano che questo è più probabile perché MediaWiki imposta imbottiture wikitables' utilizzando .css() il metodo di jQuery (o altri equivalenti, che fa le misurazioni em-based non rotonde Delle idee come superare questo

+0

Qual è la vostra soluzione desiderata? basta una riga con lo sfondo rosso? – Wikis

+0

Sì. per essere precisi, solo che non voglio l'emorragia La tabella che sto facendo usa lo sfondo grigio di default ma con 5x queste celle, dando un v molto Sible bleed. Ho usato il rosso qui per dimostrare l'emorragia solo – TwiNight

+0

Ok, grazie per le risposte, richiederà un po 'di riflessione ... :) – Wikis

risposta

0

se? si utilizza table { border-spacing: 0; }, lo spazio bianco è andato. Testato su Chrome dove border-spacing è impostato inizialmente 2px.