Rupture de ligne mystérieuse dans le tableau

Question

[MIS À JOUR]. J'ai une table imbriquée dans une autre qui fonctionnait bien jusqu'au jour où elle est apparue à mi-chemin de la page. J'ai vérifié le fichier réel qui est bien:

<div align="center"> 
<table width="630" border="0" cellspacing="1" cellpadding="0" style="background-color:white;"> 
<tr> 
<td> 
<table width="630" border="1" cellspacing="0" cellpadding="3"> 

Quand je considère la source de la page, la même chose:

<div align="center"> 
<table width="630" border="0" cellspacing="1" cellpadding="0" style="background-color:white;"> 
<tr> 
<td> 
<table width="630" border="1" cellspacing="0" cellpadding="3"> 

Mais quand j'Inspecter l'élément sur le chrome, il montre les éléments suivants:

<div align="center"> 
<table width="630" border="0" cellspacing="1" cellpadding="0" style="background-color:white;"> 
<tbody> 
<tr> 
<td> 
<br> 
<br> 
<br> 
<br> 
<br> 
<br> 
<table width="630" border="1" cellspacing="0" cellpadding="3"> 

Le code complet du tableau est ci-dessous:

<div align="center" class="tabContent" id="imminent"> 
<br> 

<table width="630" border="0" cellspacing="1" cellpadding="0" style="border-collapse:collapse" > 
<tr> 
<td> 
<table width="630" border="0" cellspacing="0" cellpadding="3"> 


<br> 
<div align="center"> 
<table width="630" border="0" cellspacing="1" cellpadding="0" style="background-color:white;"> 
<tr> 
<td> 
<table width="630" border="1" cellspacing="0" cellpadding="3"> 

<tr> 
<td width="65" align="center"><label class="desc" id="title1" for="date">Date</label></font></td> 
<td width="20" align="center"><label class="desc" id="title1" for="state">ST</label></font></td> 
<td width="195" align="center"><label class="desc" id="title1" for="practice_name">Name</label></font></td> 
<td width="70" align="center"><label class="desc" id="title1" for="status">Returned</label></font></td> 
<td width="70" align="center"><label class="desc" id="title1" for="progress">Sent Info</label></font></td> 
<td width="70" align="center"><label class="desc" id="title1" for="progress">F/U 2</label></font></td> 
<td width="70" align="center"><label class="desc" id="title1" for="edit">F/U 3</label></font></td> 
<td width="70" align="center"><label class="desc" id="title1" for="edit">F/U 4</label></font></td> 
</tr> 

<?php 
while($rowsim=mysql_fetch_array($resultim)){ 


$var1im = '<abbr title="Completed on: '.$rowsim['sentdate'].'">'.$rowsim['sentinfo'].'</abbr>'; 
$var2im = '<abbr title="Completed on: '.$rowsim['follow2date'].'">'.$rowsim['follow2'].'</abbr>'; 
$var3im = '<abbr title="Completed on: '.$rowsim['follow3date'].'">'.$rowsim['follow3'].'</abbr>'; 
$var4im = '<abbr title="Completed on: '.$rowsim['follow4date'].'">'.$rowsim['follow4'].'</abbr>'; } 

?> 

<tr> 
<td width="65">&nbsp;&nbsp;<? echo $rowsim['date']; ?></td> 
<td width="20">&nbsp;<? echo $rowsim['state']; ?></td> 
<td width="195">&nbsp;&nbsp; 
<a href="webleads.php?id=<? echo $rowsim['id'];?>"> <? if($rowsim['name']!="") {echo $rowsim['name']; } else { echo $rowsim['office']; }?></a></td> 
<td width="70">&nbsp;<? echo $rowsim['returned']; ?></td> 
<td width="70">&nbsp;<? echo $var1im; ?></td> 
<td width="70">&nbsp;<? echo $var2im; ?></td> 
<td width="70">&nbsp;<? echo $var3im; ?></td> 
<td width="70">&nbsp;<? echo $var4im; ?></td><br> 
</tr> 

<? } ?> 

</table> 

</td> 
</tr> 
</table> 
<br /> 
</div> 

</table> 
</table> 
</div> 

Seul le code Javascript que j'utilise est de faire des pages à onglets. Travaillé bien pendant un bon moment jusqu'à ce que cela se produise.

<script type="text/javascript"> 
//<![CDATA[ 

var tabLinks = new Array(); 
var contentDivs = new Array(); 

function init() { 

    // Grab the tab links and content divs from the page 
    var tabListItems = document.getElementById('tabs').childNodes; 
    for (var i = 0; i < tabListItems.length; i++) { 
    if (tabListItems[i].nodeName == "LI") { 
     var tabLink = getFirstChildWithTagName(tabListItems[i], 'A'); 
     var id = getHash(tabLink.getAttribute('href')); 
     tabLinks[id] = tabLink; 
     contentDivs[id] = document.getElementById(id); 
    } 
    } 

    // Assign onclick events to the tab links, and 
    // highlight the first tab 
    var i = 0; 

    for (var id in tabLinks) { 
    tabLinks[id].onclick = showTab; 
    tabLinks[id].onfocus = function() { this.blur() }; 
    if (i == 0) tabLinks[id].className = 'selected'; 
    i++; 
    } 

    // Hide all content divs except the first 
    var i = 0; 

    for (var id in contentDivs) { 
    if (i != 0) contentDivs[id].className = 'tabContent hide'; 
    i++; 
    } 
} 

function showTab() { 
    var selectedId = getHash(this.getAttribute('href')); 

    // Highlight the selected tab, and dim all others. 
    // Also show the selected content div, and hide all others. 
    for (var id in contentDivs) { 
    if (id == selectedId) { 
     tabLinks[id].className = 'selected'; 
     contentDivs[id].className = 'tabContent'; 
    } else { 
     tabLinks[id].className = ''; 
     contentDivs[id].className = 'tabContent hide'; 
    } 
    } 

    // Stop the browser following the link 
    return false; 
} 

function getFirstChildWithTagName(element, tagName) { 
    for (var i = 0; i < element.childNodes.length; i++) { 
    if (element.childNodes[i].nodeName == tagName) return element.childNodes[i]; 
    } 
} 

function getHash(url) { 
    var hashPos = url.lastIndexOf ('#'); 
    return url.substring(hashPos + 1); 
} 

//]]> 
</script> 

Answer 1

L'inspection de la page actuelle diffère de la source de page (évidemment). Chaque navigateur interprète le code demandé. La source montre ce que le navigateur reçoit, l'inspection montre l'interprétation. Une des choses que Chrome (et peut-être d'autres navigateurs) font de nos jours, essaye d'améliorer le code, en le mettant à niveau. Vous n'avez probablement pas défini de type de document (X) HTML différent dans votre page, il a donc complété votre code en ajoutant tbody. Les interprétations vont aussi (essayer de) corriger les erreurs, comme les fautes de frappe et les balises de fermeture manquantes.

Je ne peux pas reproduire les sauts de ligne: pouvez-vous ajouter votre code complet pour cela?

Mise à jour: impossible de reproduire les sauts de ligne. Ca doit avoir quelque chose à voir avec PHP. Vous pourriez vouloir fermer le tr et le td des deux tables externes aussi bien ... Peut-être que PHP n'aime pas cela.