2014-01-06 89 views
0

我有一組總是被稱爲tblData的頁面。我希望能夠爲表格內的elemenets設置CSS屬性,例如標籤,列樣式,文本等如何將CSS添加到另一個對象的一部分?

目前我做它像這樣

#tblData{ 
style...} 

.dataColumn{ 
style...} 

但我想以某種方式把它們合併成tblData類,所以我只需要添加此一個類來完成佈局。

這是我已經嘗試設置樣式的文本框和標籤,但標籤和文本框元素不起作用:

.tblData { 
    border: solid; 
    border-width: 1px; 
    height: 200px; 
    color: rgb(45,40,128); 
    background-color: white; 
    width: 100%; 
    border-radius:3px; 
    margin-top:3px; 

} 
/*Class for the labels*/ 
.tblData label { 
    width: 13%; 
    color:black; 
    border-radius:3px; 
    font-family:verdana; 
    border-radius:3px; 
    border-color:rgba(45,40,128,0.75); 
    border-width:1px; 

} 
/*Class for the data textboxes*/ 
.tblData textbox { 
    border-color: rgba(45,40,128,0.75); 
    border-width: 1px; 
    background-color:rgba(45,40,128,0.10); 
    font-family:Verdana; 
    border-radius:3px; 
} 

這是一個表的例子(注意不是完整的,因爲它是過大)

<table id="ContactsTable" class="tblData"> 
     <tr> 
      <td class="auto-style1"> 
       <asp:Label ID="lblContact" runat="server" Text="Contact" CssClass="Datalabelcolumn"></asp:Label></td> 
      <td> 
       <asp:TextBox ID="TextBox1" runat="server" CssClass="Datatextbox" Width="200px"></asp:TextBox> 
      </td> 
      <td></td> 
      <td></td> 
      <td></td> 

回答

1

如果你只希望有應用於表本身就是一個類,你可以添加特定CSS選擇器來隔離表本身的某些元素,如它的行或列,例如:

#tblData td{ 

/* sets cell styling */ 

} 

#tblData tr{ 

/* sets row styling */ 

} 

#tblData th{ 

/* sets head styling */ 

} 

#tblData tr td:first-child{ 

/* sets styling of first column */ 

} 

#tblData tr td:last-child{ 

/* sets styling of last column */ 

} 

#tblData tr td:nth-child(n){ 

/* sets styling of specific column (change n to number) */ 

} 

以上基本上都是說帶元件tblData然後選擇適合下列選擇器的子元件。查看W3 selector documentation以瞭解更多信息,也許值得一試。

這裏有一個FIDDLE與一些示例選擇器。

+0

是否可以對錶格中的文本框或標籤執行相同操作? – connersz

+0

@connersz絕對可以簡單地使用例如'#tblData label {}'或'#tblData input [type = text] {}' – SW4

+0

我試過這樣做,但它不起作用。你確定它可以與asp.net控件一起使用嗎? – connersz

相關問題