2

驚いたことに、現在のブラウザでは、テーブルの列にテキストの配置を適用することはかなりサポートされていないことがわかりました。Firefox 3.5.2、Safari 4.0.3、IE8のいずれも、下の「金額」列を右揃えで表示しません。

HTML：

<table class="full_width">
  <caption>Listing employees of department X</caption>
  <col></col>
  <col></col>
  <col></col>
  <col class="amount" width="180"></col>
  <thead>
    <tr>
      <th>Name</th>
      <th>Phone number</th>
      <th>Email</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>+45 2373 6220</td>
      <td>john@doe.com</td>
      <td>20000</td>
    </tr>
  </tbody>
</table>

CSS

.amount{
  text-align: right;
}

なぜこれが機能しないのですか？また、（firebugを介して）TD要素を左揃えにするFirefoxのネイティブルールをオフにしようとしましたが、それも機能しませんでした。

量cssクラスで背景色ルールを設定することが実際に機能することがわかります。したがって、.amountクラスがすべての列に適用されることがわかります。

CSS

.amount{
  text-align: right;
  background-color: aqua;
}

CSS 2の仕様では、col要素でサポートされている属性は4つだけであるとされているようです。「テーブル列のスタイル設定が許可されていないのはなぜですか？ 」を参照してください。

最適なソリューションを選択するための基準：かなりクロスブラウザーでサポートされている必要があります（特定のソリューションを含めるためにjqueryまたは条件付きコメントを使用して生きることができるIE6では必ずしもそうではありません）。また、複数のクラス、複数の異なる列を適用することを期待しています（つまりclass="amount before_tax"）

各行の関連するtdにクラスを設定するのは嫌です。私のオプションは何ですか？

4

5 に答える 5

7

各行の関連するtdにクラスを設定するのは嫌です。私のオプションは何ですか？

それはそれです：各tdのクラス。

于 2009-09-08T08:25:59.467 に答える
2

列の各セルにクラスを手動で追加したくない場合、他の唯一のオプションはjavascriptを使用して追加することです。

jQueryの場合：

$("table tbody tr td:eq(3)").addClass("amount");
于 2009-09-08T08:29:01.847 に答える
1

行の最後の要素にはいつでもクラスを設定できます。

.full_width td:last-child {
    text-align: right;
}
于 2009-09-08T08:52:54.623 に答える
0

td要素にクラスを設定する必要があります。それが唯一の方法だと思います。

于 2009-09-08T08:28:20.140 に答える
0

あなたの答えから、COL要素を解析するJQueryスクリプトを作成することを考えました。次に、対応するCOLに一致する各行を検索し、次のようにCOLクラスを各要素に適用する必要があります。

enter code here$（ "table tbody tr td：eq（3）"）。addClass（ "amount"）;

ただし、クラス定義にtext-alignが含まれている場合にのみ、（パフォーマンスの向上として）実行してください。

もちろん、colspan要素とCOLGROUP要素の完全に複雑な実装はやり過ぎであり、おそらくサポートされていません。

そのアイデアについて何か考えはありますか？

于 2009-09-09T11:08:54.973 に答える