風格標題標題基於列單元格類型

我有一個表格是用CSS類填充細胞字符串和貨幣。我希望字符串列的標題左對齊，並且貨幣列的標題右對齊。風格標題標題基於列單元格類型

有沒有辦法純粹用CSS來做到這一點？

在下面的代碼，所述字符串報頭將被左對齊和貨幣頭將是正確對準的，並且它應該通過檢測類型在該列中的單元的知道這一點。

注意：單列（頭下）中的所有單元格將共享相同的類類型。沒有混合和匹配。

<table> 
    <thead> 
     <tr> 
      <th>Strings</th> 
      <th>Currency</th> 
     </tr> 
    </thead> 
    <tr> 
     <td class="string">This is a string.</td> 
     <td class="currency">100.00</td> 
    </tr> 
</table>

我的想法是這樣的：

table td.string thead th { // if cells in column are of string type 
    text-align:left; 
} 

table td.currency thead th { // if cells in column are of currency type 
    text-align:right; 
}

我知道上面的CSS將無法正常工作，但有一些CSS技巧，會做這樣的事情？

來源

2013-05-02 Jon

是列交替，這意味着他們去串，貨幣，字符串，貨幣等？如果是這樣的話，你可以使用類似於：'th：nth-child（odd）{text-align：left;}'和'th：n-child（even）{text-align：right;}' – Vektor 2013-05-02 14:43:12

不需要，不需要。我試圖避免僞選擇器，因爲我必須支持早期版本的IE。 – Jon 2013-05-02 14:59:48

根據給定的音符

Note: All cells in a single column (under the header) will share the same class type. There is no mixing and matching.

你可以試試這個發生在你的HTML和CSS來實現這一目標。

HTML：

<table> 
     <thead> 
      <tr> 
       <th class="string"> 
        Strings 
       </th> 
       <th> 
        Currency 
       </th> 
      </tr> 
     </thead> 
     <tr class="currency"> 
      <td class="string"> 
       This is a string. 
      </td> 
      <td class="currency"> 
       100.00 
      </td> 
     </tr> 
    </table>

CSS：

.string 
     { 
      text-align: left; 
     } 

     .currency 
     { 
      text-align: right; 
     }

希望這將有助於:)

來源

2013-05-02 14:56:47

是的，我想我可以這樣做。 – Jon 2013-05-02 15:00:06

風格標題標題基於列單元格類型

回答

相關問題