2010-03-19 56 views
0

我最近一直在研究一个Pastebin脚本(为了好玩),并且遇到了一个我在CSS中似乎无法解决的问题。我有一个2列的表。 1列用于显示行号,第2列用于显示代码。我似乎无法让数字与代码中的行匹配,因此看起来很奇怪(例如:http://www.zamnproductions.com/paste.php?id=32)。看看我的代码(代码段):匹配表中2个不同列中的文本?

<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> 

这里就是表由部分:

<?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 }?> 

回答

2

你得到的表结构是关闭的。

这是您的脚本输出的内容。

<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> 

当它应该输出更多的东西一样:

<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> 

希望每个表行由两列,一个以数字和一个与代码。你的脚本将所有的数字放入一列中。你应该把代码分成几行,然后通过listNumbers进行foreach。