2010-03-19 8 views
0

J'ai récemment travaillé sur un script Pastebin (pour le plaisir) et j'ai rencontré un problème que je n'arrive pas à résoudre en CSS. J'ai une table avec 2 colonnes. Une colonne est utilisée pour afficher les numéros de ligne et la deuxième colonne est utilisée pour afficher le code. Je n'arrive pas à faire correspondre les nombres avec les lignes du code, donc ça a l'air bizarre (exemple: http://www.zamnproductions.com/paste.php?id=32). Jetez un oeil à mon code (l'extrait):Correspondance de texte dans 2 colonnes différentes dans un tableau?

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
    <style type="text/css"> 
     td.num { 
     vertical-align: top; 
     } 
     td.numbers { 
     display:table-cell; 
     padding:1px; 
     vertical-align: top; 
     line-height:25px; 
     } 
     td.code { 
     display:table-cell; 
     vertical-align: top; 
     line-height:20px; 
     } 
     #hide { 
     display:none; 
     } 
     #leftcontent { 
     position: absolute; 
     left:10px; 
     top:119px; 
     width:200px; 
     background:#fff; 
     border:0px solid #000; 
     } 
     #centercontent { 
     background:#fff; 
     margin-left: 199px; 
     margin-right:199px; 
     border:0px solid #000; 
     voice-family: "\"}\""; 
     voice-family: inherit; 
     margin-left: 201px; 
     margin-right:201px; 
     } 
     html>body #centercontent { 
     margin-left: 202px; 
     margin-right:201px; 
     } 
    </style> 

Voici la partie où la table est faite:

<?php 
if (isset($_GET['id'])) { 
$paste = new Paste();?> 
<table border="1"> 
<tr> 
<td class="num"><font size="2"><?php $paste->listNumbers($_GET['id']); ?></font></td> 
<td class="code"><?php $paste->viewCode($_GET['id']); ?></td> 
</tr> 
</table> 
<?php }?> 

Répondre

2

Votre structure de table résultant est désactivée.

Voici ce que produit votre script.

<table border="1"> 
    <tr> 
     <td class="num"> 
      <font size="2"> 
      <table border="0"> 
       <tr> 
        <td class="numbers">1.</td> 
       </tr> 
       <tr> 
        <td class="numbers">2.</td> 
       </tr> 
       [...] 
      </table> 
      </font> 
     </td> 
     <td class="code"> 
      <pre><b>for</b> (<b>int</b> i = 5; i == 5; i++) 
      { 
      System.out.pr<b>int</b>ln(&quot;LOLOL&quot;); 
      }</pre><br/> 
     </td> 
    </tr> 
</table> 

Quand il faut quelque chose de sortie plus comme:

<table border="1"> 
    <tr> 
     <td class="num">1.</td> 
     <td class="code"> 
      <pre><b>for</b> (<b>int</b> i = 5; i == 5; i++)</pre> 
     </td> 
    </tr> 
    <tr> 
     <td class="num">2.</td> 
     <td class="code"> 
      <pre>{</pre> 
     </td> 
    </tr> 
</table> 

Vous voulez que chaque ligne de la table pour se composent de deux colonnes, l'une avec le nombre et l'autre avec le code. Votre script jette tous les nombres dans une colonne. Vous devriez diviser le code en lignes, puis foreach à travers les listNumbers.

Questions connexes