Question

我正在尝试为表中的对象设置一些样式，但问题是属性未应用于实际对象。

.tblData工作正常，但标签和文本框属性应该是或者表格中出现的任何ASP.net标签或文本框，但CSS不会应用于它们。

.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;
}

这是HTML（无法显示所有内容，因为表格很大）：

<table id="tblAddress" class="tblData">
           <tr>
               <td class="auto-style3">
                   <asp:Label ID="lblACNO" runat="server" Text="ACNO" CssClass="Datalabelcolumn"></asp:Label></td>
               <td class="auto-style2">
                   <asp:TextBox ID="txtACNO" runat="server" CssClass="autosuggest" Width="20%" ToolTip="This is a test tooltip"></asp:TextBox>
               </td>

Answer 1

在ASP.Net中，服务器标记<asp:Label>将呈现为html <span>。

<asp:TextBox> <input type='text'>

所以请更改你的css选择器

来自

.tblData label {}
.tblData textbox{}

到

 .tblData span{} or .tblData .Datalabelcolumn{}
 .tblData input[type="text"]{} or .tblData .autosuggest {}

Answer 2

您正在将不同的css类应用于表中的Lable和TextBox（即Datalabelcolumn和autosuggest）。所以它只会应用这些属性。删除它们，它会工作。或者在这些控件的“Datalabelcolumn”和“autosuggest”css类中提及您需要的任何样式。

Answer 3

将class="tblData"添加到td而不是table

basic demo

        <td class="tblData">
            <label>this is a label</label>
            <textbox>this is textbox</textbox>
        </td>

CSS表属性

3 个答案: