更好的方法来对齐HTML表格中的文本 [英] Better way to right align text in HTML Table

问题描述

我有一个包含大量行的HTML表格，我需要对齐一列。

我知道以下几种方式，

 < tr>< td> ..< / td>< td> ..< / td>< td align ='右'> 10.00< / TD>< TR> 
  

和

 < tr>< td> ..< / td>< td> ..< / td>< td class ='right-align-class'> 10.00< / td> < TR> 
  

在这两种方法中，我必须对每个< tr> 标记。 （如果有1000行，我必须将 align ='right'或 class ='right-align-class'<1000次。）

有没有这样做的有效方法？ 是否有任何直接的说法，将所有行中的第三列对齐？

直接回答您的问题：否。没有更简单的方法可以在所有现代浏览器中获得一致的外观，而无需在列上重复该类。 b
$ b

HTML：

 < table class =products> 
< tr> 
< td> ...< / td> 
< td> ...< / td> 
< td class =price> 10.00< / td> 
< td> ...< / td> 
< td> ...< / td> 
< / tr> 
< tr> 
< td> ...< / td> 
< td> ...< / td> 
< td class =price> 11.45< / td> 
< td> ...< / td> 
< td> ...< / td> 
< / tr> 
< / table> 
  

CSS：

  table.products td.price {
 text-align：right; 
 
  

为什么你不应该使用nth-child：

CSS3伪选择符nth-child对此非常完美 - 并且效率更高 - 但在实际web上使用它是不切实际的它今天存在。 几种主流的现代浏览器都不支持，包括6-8的所有IE浏览器。不幸的是，这意味着子女在占有重要份额（至少40％ ）的浏览器。

所以，nth-child很棒，但如果你想要一致的外观和感觉，这是不可行的。 b $ b

I have an HTML table with large number of rows, and I need to right align one column.

I know the following ways,

<tr><td>..</td><td>..</td><td align='right'>10.00</td><tr>

and

<tr><td>..</td><td>..</td><td class='right-align-class'>10.00</td><tr>

In both the methods, I have to repeat the align or class parameter on every <tr> tag. (If there are 1000 rows, I have to put align='right' or class='right-align-class' 1000 times.)

Is there any efficient way to do this ? Is there any direct way to say, align the third column in all rows to right ?

解决方案

To answer your question directly: no. There is no more simple way to get a consistent look and feel across all modern browsers, without repeating the class on the column. (Although, see below re: nth-child.)

The following is the most efficient way to do this.

HTML:

<table class="products">
  <tr>
    <td>...</td>
    <td>...</td>
    <td class="price">10.00</td>
    <td>...</td>
    <td>...</td>
  </tr>
  <tr>
    <td>...</td>
    <td>...</td>
    <td class="price">11.45</td>
    <td>...</td>
    <td>...</td>
  </tr>
</table>

CSS:

table.products td.price {
  text-align: right;
}

Why you shouldn't use nth-child:

The CSS3 pseudo-selector, nth-child, would be perfect for this -- and much more efficient -- but it is impractical for use on the actual web as it exists today. It is not supported by several major modern browsers, including all IE's from 6-8. Unfortunately, this means that nth-child is unsupported in a significant share (at least 40%) of browsers today.

So, nth-child is awesome, but if you want a consistent look and feel, it's just not feasible to use.

这篇关于更好的方法来对齐HTML表格中的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！