FireFox CSS Table Extra Border Line

J'ai rencontré un problème CSS de bordure de tableau dans Firefox, lorsque la bordure CSS s'est effondrée, et que j'ai 2 cellules fusionnées, l'une d'elles a une bordure 1px. Une ligne de bordure supplémentaire indésirable existe sur la droite. Ce problème n'existe pas dans d'autres navigateurs, IE et Chrome n'ont pas le problème.FireFox CSS Table Extra Border Line

FireFox version est

Mozilla/5.0 (Windows; U; Windows NT 5.1 , zh-CN; rv: 1.9.2.8) Gecko/20100722 Firefox/3.6.8 (CLR .NET 3.5. 30729)

Mon dOCTYPE est testé:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

alt text

<table cellspacing="0" cellpadding="0" style="position: absolute; width: 217px; left: 0px;border-collapse:collapse"> 
<colgroup><col col="0" style="width: 72px;"><col col="1" style="width: 72px;"><col col="2" style="width: 72px;"> 
</colgroup> 
<tbody> 
<tr tridx="0" style="height: 19px;"> 
<td rowspan="2" colspan="2" style="border: 1px solid #000000"></td><td row="0" col="2"></td> 
</tr> 
<tr tridx="1" style="height: 19px;"><td row="1" col="2"></td></tr> 
<tr tridx="2" style="height: 19px;"><td row="2" col="0"></td><td row="2" col="1"></td><td row="2" col="2"></td></tr> 
<tr tridx="3" style="height: 19px;"><td rowspan="3" colspan="2" style="border: 1px solid #000000"></td><td></td></tr> 
<tr tridx="4" style="height: 19px;"><td ></td></tr> 
<tr tridx="5" style="height: 19px;"><td></td></tr> 
</tbody> 
</table>

Source

2010-10-08 Fisher

Qu'est-ce que doctype utilisez-vous? –

Mon doctype testé est: , généré automatiquement par editplus. – Fisher

Je ne sais pas s'il y a une meilleure solution pour cela, mais le problème réside colspan et l'utilisation de border-collapse.

Je récrit le code juste parce qu'il avait l'air malpropre pour moi, mais fondamentalement, la solution est d'utiliser border-spacing: 0; au lieu de border-collapse: collapse;

Ce n'est pas parfait, car ils ne sont pas la même chose. Donc, si toutes vos cellules avaient des bordures, alors celles à l'intérieur de la table doubleraient en créant une bordure de 2px.

Cependant dans cette situation, vous ne remarquerez rien et vous pouvez utiliser border-collapse de toute façon.

Eh bien, je pense que j'en ai assez dit.

Voici mon code (un peu différente de la vôtre, mais il fait la même chose):

CSS:

<style type="text/css"> 
.tableStyle { 
position: absolute; 
left: 0px; 
border-spacing: 0; 
} 
.tableStyle td { 
height: 19px; 
width: 72px; 
} 
.blackBorder { 
border: 1px solid #000; 
} 
</style>

HTML:

<table class="tableStyle"> 
<tr> 
    <td rowspan="2" colspan="2" class="blackBorder">1</td> 
    <td>2</td> 
</tr> 
<tr> 
    <td>3</td> 
</tr> 
<tr> 
    <td>4</td> 
    <td>5</td> 
    <td>6</td> 
</tr> 
<tr> 
    <td rowspan="3" colspan="2" class="blackBorder">7</td> 
    <td>8</td> 
</tr> 
<tr> 
    <td>9</td> 
</tr> 
<tr> 
    <td>10</td> 
</tr> 
</table>

Source

2010-10-08 09:24:22

Merci pour vos explications claires et vos bons conseils. En fait, toutes mes cellules n'avaient pas de frontières, mais certaines d'entre elles dépendent. Si j'utilise "border-collapse: collapse", la table doublera en créant des bordures 2px, sinon les autres cellules sans bord auront des bordures supplémentaires non désirées. – Fisher

Répondre

Questions connexes