HTML表格td元素按col对齐

Question

我想通过col来对齐元素。

<table>
    <tr>
        <td>GCAUCCGGGUUGAGUGC</td>
    </tr>
    <tr>        
        <td>...(((())))).....</td>
    </tr>
</table>

但结果是：

  

GCAUCCGGGUUGAGUGC
  ...（（（（）））））.....

两行元素未按col对齐，如下所示：

我该怎么做？

Answer 1

也许您希望以fixed-width or monospaced font显示？

尝试以下CSS：

table {
    font-family: "Courier New", monospace;
}

Answer 2

你应该使用等宽字体。

Answer 3

<table border="0" style="font-family:Courier, monospace;">
<tr>
    <td>GCAUCCGGGUUGAGUGC</td>
</tr>
<tr>        
    <td>...(((())))).....</td>
</tr>
</table>

Answer 4

正如其他人已经回答并评论过的那样，等宽字体是实现这一目标的方法。你不应该使用哪种等宽字体。你可以只使用

td { font-family: monospace }

在CSS中

。但这意味着每个浏览器都使用其默认的等宽字体。在Windows上，这通常是Courier New，它不是特别好（它有较大的衬线，看起来像打字机字体），甚至 - 在非常古老的系统中 - Courier（粗略的位图字体）。在给定的情况下，“C”和“G”很容易相互区分是至关重要的;在屏幕截图中（使用一些非等宽字体）它们不是。

更好的方法可能是

td { font-family: Lucida Console, Consolas, Monaco, monospace }

您甚至可以考虑使用Google font（使用过滤器将搜索限制为等宽字体），以确保（几乎可以确保）在所有平台和浏览器上使用特定的等宽字体。