CSS 表格属性答案

【问题标题】：CSS table propertiesCSS 表格属性
【发布时间】：2014-01-10 10:24:14
【问题描述】：

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

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

【问题讨论】：

也显示您的 html 标记....css 不会有帮助...或者可能是 jsfiddle 是最好的选择！！
@NoobEditor 我已经从我的表格中添加了一些 HTML 作为示例。
测试框以输入类型呈现，标签以跨度呈现，因此根据它进行更改
另外你需要添加border-style: solid; 否则不会显示边框。
@connersz，asp.net 服务器标签和最终的 html 输出不同。您需要再次编写 CSS html 标签。请检查我的答案:)

标签： c# asp.net css webforms

【解决方案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 {}

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

basic demo

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

【讨论】：