在HTML表格中正確對齊文本的更好方法

[英]Better way to right align text in HTML Table


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

我有一個包含大量行的HTML表,我需要右對齊一列。

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.)

在這兩個方法中,我必須在每個標記上重復align或class參數。(如果有1000行,我需要將align='right'或class='right- aligni -class' 1000次)

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

有什么有效的方法嗎?有沒有什么直接的方法,把所有行中的第三列對齊到右邊?

11 个解决方案

#1


52  

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.)

直接回答你的問題:不。如果不重復列上的類,就無法在所有現代瀏覽器中獲得一致的外觀和感覺。(雖然,見下文re: nth-child。)

The following is the most efficient way to do this.

下面是最有效的方法。

HTML:

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:

CSS:

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

Why you shouldn't use nth-child:

為什么不應該使用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.

CSS3偽選擇器,nth-child,將是完美的,而且效率更高——但是在實際的web上使用它是不切實際的。它不支持幾個主要的現代瀏覽器,包括所有的IE 6-8。不幸的是,這意味着nth-child在當今的瀏覽器中不受支持(至少40%)。

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

所以,nth-child是很棒的,但是如果你想要一個一致的外觀和感覺,它是不可行的。

#2


9  

If it's always the third column, you can use this (assuming table class of "products"). It's kinda hacky though, and not robust if you add a new column.

如果它總是第三列,您可以使用它(假設“products”的表類)。它有點陳腐,如果你添加一個新的列,它也不健壯。

table.products td+td+td {
  text-align: right;
}
table.products td,
table.products td+td+td+td {
  text-align: left;
}

But honestly, the best idea is to use a class on each cell. You can use the col element to set the width, border, background or visibility of a column, but not any other properties. Reasons discussed here.

但是老實說,最好的方法是在每個單元格上使用一個類。可以使用col元素設置一個列的寬度、邊框、背景或可見性,但不能設置其他屬性。這里討論的原因。

#3


8  

You could use the nth-child pseudo-selector. For example:

您可以使用第n個子偽選擇器。例如:

table.align-right-3rd-column td:nth-child(3)
{
  text-align: right;
}

Then in your table do:

然后在你的桌子上做:

<table class="align-right-3rd-column">
  <tr>
    <td></td><td></td><td></td>
    ...
  </tr>
</table>

Edit:

編輯:

Unfortunately, this only works in Firefox 3.5. However, if your table only has 3 columns, you could use the sibling selector, which has much better browser support. Here's what the style sheet would look like:

不幸的是,這只適用於Firefox 3.5。但是,如果您的表只有3個列,那么可以使用兄弟選擇器,它有更好的瀏覽器支持。以下是樣式表的外觀:

table.align-right-3rd-column td + td + td
{
  text-align: right;
}

This will match any column preceded by two other columns.

這將匹配前面的任何列和其他兩個列。

#4


3  

Looking through your exact question to your implied problem:

從你的問題中找出你的問題:

Step 1: Use the class as you described (or, if you must, use inline styles).

第1步:使用您描述的類(或者,如果必須,使用內聯樣式)。

Step 2: Turn on GZIP compression.

步驟2:打開GZIP壓縮。

Works wonders ;)

能創造奇跡。

This way GZIP removes the redundancy for you (over the wire, anyways) and your source remains standards compliant.

通過這種方式,GZIP消除了您的冗余(無論如何),您的源代碼仍然符合標准。

#5


0  

A number of years ago (in the IE only days) I was using the <col align="right"> tag, but I just tested it and and it seems to be an IE only feature:

幾年前(僅在IE中),我使用標簽,但我剛剛測試過它,它似乎是IE唯一的特性:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Test</title>
</head>
<body>
    <table width="100%" border="1">
        <col align="left" />
        <col align="left" />
        <col align="right" />
        <tr>
            <th>ISBN</th>
            <th>Title</th>
            <th>Price</th>
        </tr>
        <tr>
            <td>3476896</td>
            <td>My first HTML</td>
            <td>$53</td>
        </tr>
    </table>
</body>
</html>

The snippet is taken from www.w3schools.com. Of course, it should not be used (unless for some reason you really target the IE rendering engine only), but I thought it would be interesting to mention it.

這段視頻摘自www.w3schools.com。當然,它不應該被使用(除非出於某種原因,您確實只針對IE呈現引擎),但是我認為提到它會很有趣。

Edit:

編輯:

Overall, I don't understand the reasoning behing abandoning this tag. It would appear to be very useful (at least for manual HTML publishing).

總的來說,我不理解放棄這個標簽的原因。它看起來非常有用(至少對於手工HTML發布來說)。

#6


0  

This doesn't work in IE6, which may be an issue, but it'll work in IE7+ and Firefox, Safari etc. It'll align the 3rd column right and all of the subsequent columns left.

這在IE6中不能用,這可能是個問題,但在IE7+、Firefox、Safari等中可以用。

td + td + td { text-align: right; }
td + td + td + td { text-align: left; }

#7


0  

if you have only two "kinds" of column styles - use one as TD and one as TH. Then, declare a class for the table and a sub-class for that table's THs and TDs. Then your HTML can be super efficient.

如果您只有兩種“類型”的列樣式——使用一種作為TD,一種作為TH。然后,為該表聲明一個類,為該表的THs和TDs聲明一個子類。那么您的HTML就可以非常高效。

#8


0  

The current draft of CSS Selectors Level 4 specifies structural selectors for grids. If implemented, we will be able to do things like:

CSS選擇器級別4的當前草案指定了網格的結構選擇器。如果實施,我們將能夠做以下事情:

th.price,
th.price || td {
    text-align: right;
}

Of course, that doesn't help us today -- the other answers here offer enough practical advice for that.

當然,這對我們今天沒有幫助——這里的其他答案提供了足夠的實用建議。

#9


-1  

What you really want here is:

你真正想要的是:

<col align="right"/>

but it looks like Gecko doesn't support this yet: it's been an open bug for over a decade.

但Gecko似乎還不支持這一點:它已經有十多年的歷史了。

(Geez, why can't Firefox have decent standards support like IE6?)

(天啊,為什么Firefox不能像IE6那樣擁有良好的標准支持呢?)

#10


-2  

Use jquery to apply class to all tr unobtrusively.

不引人注目地使用jquery將類應用到所有tr。

$(”table td”).addClass(”right-align-class″);

$("表td).addClass(“right-align-class”);

Use enhanced filters on td in case you want to select a particular td.

如果您想選擇一個特定的td,請在td上使用增強的過濾器。

See jquery

看到jquery

#11


-2  

The <colgroup> and <col> tags that lives inside tables are designed for this purpose. If you have three columns in your table and want to align the third, add this after your opening <table> tag:

位於表中的和標簽就是為此而設計的。如果您的表中有三列,並且想要對齊第三列,請在打開的

標記之后添加這個:
 <colgroup>
     <col />
     <col />
     <col class="your-right-align-class" />
 </colgroup>

along with the requisite CSS:

連同必需的CSS:

 .your-right-align-class { text-align: right; }

From the W3:

W3:

Definition and Usage

  • The <col> tag defines attribute values for one or more columns in a table.

    標簽為表中的一個或多個列定義屬性值。

  • The <col> tag is useful for applying styles to entire columns, instead of repeating the styles for each cell, for each row.

    標記對於將樣式應用到整個列很有用,而不是為每一行重復每個單元格的樣式。


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2009/08/26/72f3d27f61f077feba04af052e1eb97b.html



 
粤ICP备14056181号  © 2014-2021 ITdaan.com