Matching up text in 2 different columns in a table?

I have recently been working on a Pastebin script (for fun) and I've come across a problem that I can't seem to solve in CSS. I have a table with 2 columns. 1 column is used to display the line numbers and the 2nd column is used to display the code. I can't seem to get the numbers match up with the lines in the code so it looks all weird (example: http://www.zamnproductions.com/paste.php?id=32). Take a look at my code (the snippet):

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

Here is the part where the table is made:

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

Answers


Your resulting table structure is off.

This is what your script is outputting.

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

When it should output something more like:

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

You want each table row to consist of two columns, one with the number and one with the code. Your script is throwing all the numbers into one column. You should split the code into lines, then foreach through the listNumbers.


Need Your Help

Display octothorpe inside cfoutput tags

css coldfusion

&lt;cfoutput query="getGames"&gt;

JavaScript IF statement Operators not matching (x == 1 && y == 'Parameter')

javascript if-statement operators

I have been banging my head on this for a few days and am probably just blind to the issue at this point.