使用 CSS 设置表格行内容？

Question

我可以以某种方式将：

<!-- top blue line -->
<tr bgcolor="#000066">
    <td width="120" valign="top" height="1"></td>
    <td width="1" height="1"></td>
    <td width="120" valign="top" height="1"></td>
    <td width="1" height="1"></td>
    <td width="120" valign="top" height="1"></td>
</tr>

变成更像是：

<tr class="blueline"></tr>

并且 CSS 将负责插入所有 吗？

如果在 ASP.NET/C# 中有一种合乎逻辑且简单的方法可以将格式保存在一个中心位置，我会很愿意听到它，但如果可能的话，我更愿意只使用 CSS。

编辑：

根据答案和评论，我将发布我所拥有的嵌套表格的内容，我喜欢它的外观，我想如果最好使用它，那就以完全不同的方式进行即可；至于使用 Web 控件，这可能是最好的主意，但我不确定如何使用 Web 控件，然后实际上能够将不同的内容放入 Web 控件的部分中，就好像它是静态 html 表一样。我需要能够编辑列名称、文本框和数据类型的中间部分。

代码：

<table width="362" border="0" cellspacing="0" cellpadding="0">

<!-- top blue line -->
  <tr bgcolor="#000066">
    <td width="120" valign="top" height="1"></td>
    <td width="1" height="1"></td>
    <td width="120" valign="top" height="1"></td>
    <td width="1" height="1"></td>
    <td width="120" valign="top" height="1"></td>
  </tr>

<!-- top white space -->
  <tr> 
    <td width="120" valign="top" height="10"></td>
    <td width="1" height="10"></td>
    <td width="120" valign="top" height="10"></td>
    <td width="1" height="10"></td>
    <td width="120" valign="top" height="10"></td>
  </tr>

<!-- middle row / content -->
  <tr> 

  <!-- Labels for columns go inside this td -->
    <td width="120" valign="top"> 
      <table width="100%" border="0" cellspacing="0" cellpadding="5">
        <tr valign="top"> 
          <td> 
            <p align="left"><font color="#FFFFFF"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2"><font color="#000063">
                ColumnNames
            </font></font></b></font></p>

            <!-- put labels in here -->
            <p align="left"><font face="Verdana, Arial, Helvetica, sans-serif" size="2"><font face="Verdana, Arial, Helvetica, sans-serif" size="1">
                cell_id<br />
                cell_description<br />
                cell_name
            </font></font></p>                      
          </td>
        </tr>
      </table>                                
    </td>

    <td width="1" bgcolor="#FFCF63" height="1"></td>

  <!-- textboxes go inside this td -->
    <td width="120" valign="top"> 

      <table width="100%" border="0" cellspacing="0" cellpadding="5">
        <tr valign="top"> 
          <td> 
            <p align="left"><font color="#FFFFFF"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#000063">
                Textboxes
            </font></b></font></p>
            <!-- put textboxes in here -->
            <p><font size="1" face="Verdana, Arial, Helvetica, sans-serif">
                <asp:TextBox ID="TextBox6" runat="server" Width="100px"></asp:TextBox><br />
                <asp:TextBox ID="TextBox7" runat="server" Width="100px"></asp:TextBox><br />
                <asp:TextBox ID="TextBox8" runat="server" Width="100px"></asp:TextBox>
            </font></p>
          </td>
        </tr>
      </table>
    </td>

    <td width="1" bgcolor="#FFCF63" height="1"></td>

  <!-- datatypes for columns go inside this td -->
    <td width="120" valign="top"> 
      <table width="100%" border="0" cellspacing="0" cellpadding="5">
        <tr valign="top"> 
          <td> 
            <p align="left"><font color="#FFFFFF"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2"><font color="#000063">
                Data Types
            </font></font></b></font></p>

            <!-- put datatype descriptions [varchar(50),int,etc] in here -->
            <p align="left"><font face="Verdana, Arial, Helvetica, sans-serif" size="2"><font face="Verdana, Arial, Helvetica, sans-serif" size="1">
                INT<br />
                VARCHAR(50)<br />
                VARCHAR(10)
            </font></font></p>
          </td>
        </tr>

      </table>
    </td>

  </tr>

<!-- bottom white space -->
  <tr> 
    <td height="10"></td>
    <td height="10" width="1"></td>
    <td height="10"></td>
    <td height="10" width="1"></td>
    <td height="10"></td>
  </tr>

<!-- bottom blue line -->
  <tr bgcolor="#000066"> 
    <td width="120" valign="top" height="1"></td>
    <td width="1" height="1"></td>
    <td width="120" valign="top" height="1"></td>
    <td width="1" height="1"></td>
    <td width="120" valign="top" height="1"></td>
  </tr>

</table>

Answer 1

我建议为此编写一个 javascript 函数，并且可以在您想要的任何页面上调用该函数。这将减少到处编写冗余代码的需要并使更新变得更容易。

Answer 2

CSS 将应用于引用该 css 文件的每个页面，除非在该页面中专门覆盖它。您可以将所有样式移动到 css 文件中，并且基本上在表格布局中使用尽可能少的样式。请记住，表格最适合用于报表等表格数据。如果您使用嵌套表来处理定位，那么可以通过 css 和 div 标签更好地实现这一点。

Answer 3

CSS 无法将 td 添加到 tr 中，因此您将无法采用该方法。您可以使用 jquery/javascript 来实现这一点，但如果您可以使用 asp/c#，则有一种称为 Web 用户控件的东西可以保存 html，您只需在实际页面上放置一行代码即可泵入表中。

Answer 4

对于这个特定的示例，听起来表格或第一个非标题行上的顶部边框将是完美的。假设一个表有点像：

<table>
    <thead>
        <tr>
            <th>Some Column</th>
            <th>Some Other Column</th>
        </tr>
    </thead>
    <tbody>
        <!-- rows go here -->
    </tbody>
</table>

，你可以使用快速：

tbody tr:first-of-type {
    border-top: 1px solid blue;
}

Answer 5

CSS 无法执行您所描述的操作。

但是，如果您重构标记以正确使用表格，那么您想要的就非常简单。嵌套表非常很少得到保证。

/*Set Basic font styles for table*/

#data {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 10px;
  /*Provides the border and spacing*/
  padding: 20px 0;
  border-top: 1px solid #006;
  border-bottom: 1px solid #006;
}


/*Give the table headers a bit of color*/

#data th {
  color: #000063;
  text-align: left;
  font-size: 13px;
}


/*set the width of our cells*/

#data th,
#data td {
  width: 120px;
}


/*Add some right padding to the first colum*/

#data tr>th:first-of-type,
#data tr>td:first-of-type {
  width: 114px;
  padding-right: 6px;
}


/*Add some left padding to th last colum*/

#data tr>th:last-of-type,
#data tr>td:last-of-type {
  width: 114px;
  padding-left: 6px;
}


/*Set the input width*/

#data input[type="text"] {
  width: 100px;
}

<table border="0" cellspacing="0" cellpadding="0" id="data">
  <thead>
    <tr>
      <th>Column Names</th>
      <th>Textboxes</th>
      <th>Data Types</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>cell_id</td>
      <!-- Replace input tags with your asp:textbox control -->
      <td><input type="text" /></td>
      <td>INT</td>
    </tr>
    <tr>
      <td>cell_description</td>
      <td><input type="text" /></td>
      <td>VARCHAR(50)</td>
    </tr>
    <tr>
      <td>cell_description</td>
      <td><input type="text" /></td>
      <td>VARCHAR(10)</td>
    </tr>
  </tbody>
</table>