HTML表格td元素按列对齐

我想通过col对齐td元素

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

GCAUCGGGUUGUGC
...(((())))).....

但结果是：

GCAUCGGGUUGUGC
…（（((()())

两行元素不按列对齐，如下所示：

---

我该怎么做呢？

你应该使用monospace字体。

也许你想在一个屏幕上显示

尝试以下CSS：

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

GCAUCGGGUUGUGC
...(((())))).....

正如其他人回答和评论的那样，单空格字体是实现这一点的方法。您应该使用哪种单空格字体就不那么明显了。你可以用

td { font-family: monospace }

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

更好的方法可能是

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

---

您甚至可以考虑使用（使用过滤器限制搜索到单空间字体），以确保（几乎确保）在所有平台和浏览器上使用特定的单字体字体。也就是说，其中每个字符的宽度相同。使用固定间距字体对齐字符，如下所示

Courier

是一个不错的选择。您能详细说明OP是如何做到这一点的吗？

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