用於表格的CSS樣式

Question

我有一個如下表格 我想將Left屬性添加到奇數列。

<table id="tblTopcontrols"> 
      <tr> 
       <td> 
       </td> 
       <td> 
       </td> 
       <td> 
       </td> 
       <td> 
       </td> 
      </tr> 
     </table> 

我想爲此表添加這些屬性到此表中。

<table id="tblTopcontrols"> 
       <tr> 
        <td align=left> 
        </td> 
        <td> 
        </td> 
        <td align=left> 
        </td> 
        <td> 
        </td> 
       </tr> 
</table> 

Answer 1

嘗試使用CSS3選擇器如:nth-child()

http://css-tricks.com/how-nth-child-works/

例如：

#tblTopcontrols td:nth-child(odd) 
{ 
    text-align: left; 
} 

如果你擔心兼容性，jQuery的允許CSS3的樣式選擇，甚至在瀏覽器上，其不要直接支持css3。

然後你可以這樣做：

//add the css class named "someAlignLeftClass" to all odd td elements of 
// the table with the id 'tblTopcontrols': 
$("#tblTopcontrols td:nth-child(odd)").addClass("someAlignLeftClass"); 

然後聲明類本身在CSS：

.someAlignLeftClass 
{ 
    text-align: left; 
} 

確信它，如果你使用jQuery的，但大多數網站這些天非常有用。它會手動保存每個td並編輯html來添加一個類。也許你有很多這些類型的表的...

Answer 2

<table id="tblTopcontrols"> 
      <tr> 
       <td class="odd"></td> 
       <td></td> 
       <td class="odd"></td> 
       <td></td> 
      </tr> 
</table> 

，只是應用樣式像text-align:left爲#tblTopcontrols td.odd類

Answer 3

不能應用HTML的CSS屬性，而是爲你的情況下，左對齊文本，您可以使用CSS3'S :nth-child()：

#tblTopcontrols td:nth-child(odd) { text-align: left; } 

或者，如果你需要更好的瀏覽器兼容性，去danip's answer。