Bir tablonun tüm sütununun metin hizalamasını ayarlamanın bir yolu var mı?

Question

İkinci sütundaki tüm hücrelerin metin hizalamasını right olarak ayarlamak için basit bir yol var mı?

Veya sütuntaki her hücre için hizalamayı ayarlamanın tek yolu mu?

(Maalesef col etiketinin align nitelik Firefox'ta desteklenmez.)

Answer 1

2 sütundaki her hücreye bir sınıf ekleyin.

Ayrıca CSS3'ü de kullanabilirsiniz. çalışacak ikinci sütundaki üst üste her hücre veya hücre için bir sınıf ekleme

tr td:nth-child(2) { /* I don't think they are 0 based */ 
    text-align: right; 
} 

(O = < içinde IE8'i çalışmaz)

Answer 2

.

.second { 
    text-align: right; 
} 

veya

eklenti sınıf tr ve stil sayfasında şu css ekleyin.

tr.second { 
    text-align: right; 
} 

Answer 3

Aşağıdakilerin çalışacağını ve her satırın ikinci hücresini bir notla açıklama eklemesini gerektirmediğine inanıyorum.

td:first-child + td { text-align: right; } 

Bu kural, ana öğesinin ilk çocuğu olan bir td'yi hemen izleyen bir td seçecektir. Tipik bir tabloda, bu her satırdaki ikinci hücreyi seçer.

Answer 4

Partiye geç kaldım, ama bu sorunu kendim aldım, böylece bir çözümü paylaşacağımı düşündüm. Bu cevabın yalnızca LESS'u kullanıyorsanız uygulanabilir olduğuna dikkat edin.

// Loop for @i until @i = @n 
// Much like - for($i=0; $i<=$n; $i++) 
// 
.table-cols(@n, @i: 1) when (@i =< @n) 
{ 
    .table-center-col-@{i} 
    { 
     tr > td:nth-child(@{i}) 
     { 
      text-align: center; 
     } 
    } 

    .table-right-col-@{i} 
    { 
     tr > td:nth-child(@{i}) 
     { 
      text-align: right; 
     } 
    } 

    // Continue the iteration 
    .table-cols(@n, (@i + 1)); 
} 

.table-cols(16); 

Bu bir yük üretecek: Bunun yerine elle size tabloları uygulayabileceğiniz sınıfların bir dizi oluşturmak için size AZ içinde döngüler kullanabilirsiniz her hücreye sınıf veya stil eklemek zorunda

.table-center-col-1 gibi sınıflar, .table-center-col-16'a kadar (bu örnekte) ve ilgili sütunun metnini ortalayacaklardır. Aynı zamanda .table-right-col-n ile sağa hizalanmış metin için de aynısını yapacağız.

Bir tabloda sahip olabileceğiniz maksimum sütun miktarını karşıladığından emin olmak için, birlikte verilen numarayı (16'dan) herhangi bir şeye ayarlayabilirsiniz. Değişken sütun numaraları için bu size çok yardımcı olmayacaktır.

4 sütundaki hücrelerin

<table class="table-center-col-4"> 
    <thead> 
     <tr> 
      <td>Column 1</td> 
      <td>Column 2</td> 
      <td>Column 3</td> 
      <td>Column 4</td> 
      <td>Column 5</td> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>x</td> 
      <td>x</td> 
      <td>x</td> 
      <td>x</td> 
      <td>x</td> 
     </tr> 
    </tbody> 
</table> 

Tüm şimdi merkezli olacaktır metni:

Sonra tüm yapmanız gereken tabloya uygulamak olduğunu.

Answer 5

özellikle zarif olmasa da, benim site genelindeki css dosyasında böyle bir şey atmak ister:

.tr1 td:nth-child(1), .tr1 th:nth-child(1), 
.tr2 td:nth-child(2), .tr2 th:nth-child(2), 
.tr3 td:nth-child(3), .tr3 th:nth-child(3), 
.tr4 td:nth-child(4), .tr4 th:nth-child(4), 
.tr5 td:nth-child(5), .tr5 th:nth-child(5), 
.tr6 td:nth-child(6), .tr6 th:nth-child(6), 
.tr7 td:nth-child(7), .tr7 th:nth-child(7), 
.tr8 td:nth-child(8), .tr8 th:nth-child(8), 
.tr9 td:nth-child(9), .tr9 th:nth-child(9) { text-align:right } 

.tc1 td:nth-child(1), .tc1 th:nth-child(1), 
.tc2 td:nth-child(2), .tc2 th:nth-child(2), 
.tc3 td:nth-child(3), .tc3 th:nth-child(3), 
.tc4 td:nth-child(4), .tc4 th:nth-child(4), 
.tc5 td:nth-child(5), .tc5 th:nth-child(5), 
.tc6 td:nth-child(6), .tc6 th:nth-child(6), 
.tc7 td:nth-child(7), .tc7 th:nth-child(7), 
.tc8 td:nth-child(8), .tc8 th:nth-child(8), 
.tc9 td:nth-child(9), .tc9 th:nth-child(9) { text-align:center } 

sütuna 2 istiyorsanız, merkez veya sağa hizalanmış yani istediğiniz sütun numaraları Sonra sadece belirtmek CSS süper zarif olmasa da

<table class="tr2 tc3 tr7"> 

, alternatifleri daha da az zariftir: & 7 sağa hizalanmış ve 3 sadece yap, merkezli her tablo için özel bir sınıf, yani ya bir olması için her tr gerektiren class="ralign" veya benzerleri.

Doesn't work with IE8