匹配表中 2 个不同列中的文本？答案

【问题标题】：Matching up text in 2 different columns in a table?匹配表中 2 个不同列中的文本？
【发布时间】：2010-03-19 21:58:25
【问题描述】：

我最近一直在编写一个 Pastebin 脚本（为了好玩），我遇到了一个我似乎无法用 CSS 解决的问题。我有一个有 2 列的表。第 1 列用于显示行号，第 2 列用于显示代码。我似乎无法让数字与代码中的行匹配，所以看起来很奇怪（例如：http://www.zamnproductions.com/paste.php?id=32）。看看我的代码（sn-p）：

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

【问题讨论】：

标签： php html css html-table

【解决方案1】：

您生成的表结构已关闭。

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

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

【讨论】：