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.c开发者_Go百科om/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 }?>
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("LOLOL");
}</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.
加载中,请稍侯......
精彩评论