javascript HTML 表格单元格对齐方式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12501243/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML table cell alignment
提问by Balkrishna Rawool
I am using jQuery mobile and I would like to create a listview which should look like
我正在使用 jQuery mobile，我想创建一个看起来像的列表视图
It looks very simple to achieve and I have got almost everything except the right-alignment of the column on the right. Note that every three cells on the right-column are merged. Any help is appreciated. Thanks.
它看起来很容易实现，除了右侧列的右对齐之外，我几乎获得了所有内容。请注意，合并右列中的每三个单元格。任何帮助表示赞赏。谢谢。
Update: Here is my code:
更新：这是我的代码：
<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>
采纳答案by Balkrishna Rawool
After struggling for a while I figured out what the problem was. In my code I'm creating several tables. (One table for each <li>.) So when I right-align the text in the right-column, it is right-aligned with-in each table. But when all these tables are seen one-below-the-other the text doesn't appear to be right aligned.
The solution is to right align right-columns in all tables and also maintain fixed width in all tables.e.g. .price{ font-size: 30px;
width:200px;
text-align: right;
}
经过一段时间的挣扎，我想出了问题所在。在我的代码中，我创建了几个表。（每个表一个<li>。）所以当我右对齐右列中的文本时，它在每个表中右对齐。但是，当所有这些表格都在一个下方看到时，文本似乎没有右对齐。解决方案是在所有表格中右对齐右列，并在所有表格中保持固定宽度。例如.price{ font-size: 30px;
width:200px;
text-align: right;
}
Thanks Joe W and Rafael de Souza for your help.
感谢 Joe W 和 Rafael de Souza 的帮助。
回答by Rafael de Souza
回答by Joe W
If you change your css by adding text-align: right it should get you the results you need.
如果您通过添加 text-align: right 来更改您的 css，它应该会为您提供所需的结果。
before:
前：
.price{ font-size: 30px;}
after:
后：
.price{ font-size: 30px; text-align: right;}
