javascript - HTML表格单元格对齐

Question

我正在使用 jQuery mobile，我想创建一个看起来像

它看起来很容易实现，除了右边列的右对齐之外，我几乎得到了所有东西。请注意，右列上的每三个单元格都会合并。任何帮助表示赞赏。谢谢。

更新：这是我的代码：

<ul data-role="listview" id="mylist"><li><table><tr><td><label class="label1">EUR</label></td><td rowspan="3"><label class="price">1.3245</label></td></tr><tr><td><label class="label2">vs</label></td></tr><tr><td><label class="label3">USD</label></td></tr></table></li><li><table><tr><td><label class="label1">EUR</label></td><td rowspan="3"><label class="price">0.89</label></td></tr><tr><td><label class="label2">vs</label></td></tr><tr><td><label class="label3">GBP</label></td></tr></table></li></ul>

Answer 1

好吧，因为你没有发布你的代码，我只能帮助你

在这里查看

代码：

jQuery('tr').each(function() {
  if (this.cells[1]) {
    this.cells[1].style.textAlign = 'right';
  }
});

Answer 2

经过一段时间的努力，我弄清楚了问题所在。在我的代码中，我创建了几个表。（每个表一个表<li>。）因此，当我右对齐右列中的文本时，它在每个表中右对齐。但是，当所有这些表格都在一个下方看到时，文本似乎没有右对齐。解决方案是在所有表格中右对齐右列，并在所有表格中保持固定宽度。例如.price{ font-size: 30px; width:200px; text-align: right; }

感谢 Joe W 和 Rafael de Souza 的帮助。

Answer 3

如果您通过添加 text-align: right 来更改 CSS，它应该会为您提供所需的结果。

前：

.price{ font-size: 30px;}

后：

.price{ font-size: 30px; text-align: right;}