html - HTML中的表格对齐

Question

我想要一张有两列的桌子，左边是一首诗，右边是翻译。这首诗很长，因此需要向下滚动页面才能阅读全部内容。但我不希望诗的标题和每列顶部的一些链接滚动。诗的正文应随着卷轴消失在标题下方，标题和链接位于固定位置。经过各种尝试，我几乎可以使用两个不同的表格完成它：顶部的表格包含固定的标题和链接，样式选项位置：固定，另一个表格位于下方，包含诗歌的文本。我工作得很好，除了一件事：因为我对许多不同的诗歌使用相同的代码，而且标题的长度不同，我无法使顶部表格中的标题与底部表格中的文本正确对齐。我可以使用 left:90px （例如）为特定页面手动调整标题的位置，但同样不适用于诗歌标题较长的另一个页面。我正在复制我正在使用的代码下方。这是用于 200 多个不同文件的模板。我有一个脚本，用适当的内容替换所有大写的字符串（如 THE_TITLE、TRANSLATED_TEXT 等）。正如我所提到的，问题是如果我为一个特定内容调整顶部表格的参数（具有位置：固定），它将不适用于另一个内容，因为诗歌标题的长度不同. 我的问题是：有没有办法像我尝试的那样用两张桌子做我想做的事，

<table align="center" width=1200px style="position:fixed;top:270px;left:90px;">
<tr align="center"  >
<td style="text-align:center; z-index:20;"> <a href="FILENAME.php" style="text-decoration: 
none; color: #CC0000;">Seulement fran&ccedil;ais </a> </td> 
<td style="text-align:center; z-index:20;"> <a href="FILENAME_en.php" style="text- 
decoration: none; color: #04860a;">French and English </a> </td> </tr>
<tr align="center" style="z-index:20;" >
<th  align="center" style="z-index:20;"><font size=4> THE_TITLE </font> <br><br></th> 
<th  align="center" style="z-index:20;"> <font size=4>TRANSLATED_TITLE</font> <br><br></th>
</tr>
</table>
<table align="center" width=1200px >
<tr align="center">
<td  align="center" valign="top"> 
ORIGINAL_TEXT
</td>
<td  align="center" valign="top">
TRANSLATED_TEXT
</td>
</tr>
</table>

标签： htmlcss