使用CSS设置表格行内容？

时间：2012-02-09 15:59:55

标签： html css html-table

我可以以某种方式转身：

<!-- 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将负责插入所有<td> s？

如果在ASP.NET / C＃中有一个逻辑和简单的方法，我将格式保存在一个中心位置，我会听到它，但我更愿意尽可能使用CSS。< / p>

编辑：

基于答案和评论，我将发布我对嵌套表的所有内容，我喜欢它的外观，我想如果最好使用它只是以一种完全不同的方式，那就好了;至于使用可能是最好的想法的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>

5 个答案:

答案 0 :(得分：0)

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

答案 1 :(得分：0)

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

答案 2 :(得分：0)

CSS无法将td添加到tr中，因此您将无法采用该方法。您可以使用jquery / javascript来实现此功能，但是如果您可以使用asp / c＃，那么可以使用一个名为Web用户控件的东西来保存html，您只需要在实际页面上放一行代码就可以在表中填充。< / p>

答案 3 :(得分：0)

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

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

答案 4 :(得分：0)

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>

相关问题
最新问题