Question

我正在将示例CSS表写入html文件，表格正在运行，但交替的行颜色没有生效。是由于段落

标签，还是使用table.gridtable？

    Dim sw As New StreamWriter(filename)
    sw.WriteLine("<!DOCTYPE html><html><body>")
    sw.WriteLine("<style type=" & """" & "text/css" & """" & ">")
    sw.WriteLine("table.gridtable {")
    sw.WriteLine("  font-family: verdana,arial,sans-serif;")
    sw.WriteLine("  font-size:12px;")
    sw.WriteLine("  color: #333333;")
    sw.WriteLine("  border-width: 1px;")
    sw.WriteLine("  border-color: #666666;")
    sw.WriteLine("  border-collapse: collapse;")
    sw.WriteLine("}")
    sw.WriteLine("table.gridtable th {")
    sw.WriteLine("  border-width: 1px;")
    sw.WriteLine("  padding: 8px;")
    sw.WriteLine("  border-style: solid;")
    sw.WriteLine("  border-color: #666666;")
    sw.WriteLine("  background-color: #dedede;")
    sw.WriteLine("}")
    sw.WriteLine("table.gridtable tr: nth-child(even) {")
    sw.WriteLine("background-color: #fdf5e6;")
    sw.WriteLine("}")
    sw.WriteLine("table.gridtable td {")
    sw.WriteLine("  border-width: 1px;")
    sw.WriteLine("  padding: 8px;")
    sw.WriteLine("  border-style: solid;")
    sw.WriteLine("  border-color: #666666;")
    sw.WriteLine("  background-color: #ffffff;")
    sw.WriteLine("}")
    sw.WriteLine("</style>")

    sw.Write("<p>")
    sw.WriteLine("<table class=" & """" & "gridtable" & """" & " Align=center>")
    sw.WriteLine("<tr>")
    sw.Write("<th>" & "Output" & "</th>")
    sw.Write("<th>" & "Output" & "</th>")
    sw.Write("<th>" & "Output" & "</th>")
    sw.Write("<th>" & "Output" & "</th>")
    sw.WriteLine("</tr>")
    sw.WriteLine("<tr>")
    sw.WriteLine("<td align=""center""><font color=" & """" & "#000000" & """" & ">Hello</font></td>")
    sw.WriteLine("<td align=""center""><font color=" & """" & "#000000" & """" & ">Hello</font></td>")
    sw.WriteLine("<td align=""center""><font color=" & """" & "#000000" & """" & ">Hello</font></td>")
    sw.WriteLine("<td align=""center""><font color=" & """" & "#000000" & """" & ">Hello</font></td>")
    sw.WriteLine("</tr>")
    sw.WriteLine("<tr>")
    sw.WriteLine("<td align=""center""><font color=" & """" & "#000000" & """" & ">Hello</font></td>")
    sw.WriteLine("<td align=""center""><font color=" & """" & "#000000" & """" & ">Hello</font></td>")
    sw.WriteLine("<td align=""center""><font color=" & """" & "#000000" & """" & ">Hello</font></td>")
    sw.WriteLine("<td align=""center""><font color=" & """" & "#000000" & """" & ">Hello</font></td>")
    sw.WriteLine("</tr>")
    sw.WriteLine("<tr>")
    sw.WriteLine("<td align=""center""><font color=" & """" & "#000000" & """" & ">Hello</font></td>")
    sw.WriteLine("<td align=""center""><font color=" & """" & "#000000" & """" & ">Hello</font></td>")
    sw.WriteLine("<td align=""center""><font color=" & """" & "#000000" & """" & ">Hello</font></td>")
    sw.WriteLine("<td align=""center""><font color=" & """" & "#000000" & """" & ">Hello</font></td>")
    sw.WriteLine("</tr>")
    sw.WriteLine("<tr>")
    sw.WriteLine("<td align=""center""><font color=" & """" & "#000000" & """" & ">Hello</font></td>")
    sw.WriteLine("<td align=""center""><font color=" & """" & "#000000" & """" & ">Hello</font></td>")
    sw.WriteLine("<td align=""center""><font color=" & """" & "#000000" & """" & ">Hello</font></td>")
    sw.WriteLine("<td align=""center""><font color=" & """" & "#000000" & """" & ">Hello</font></td>")
    sw.WriteLine("</tr>")
    sw.WriteLine("</table></p>")
    sw.WriteLine("</body></html>")
    sw.dispose

下面是html代码，删除空格并没有解决问题。

<!DOCTYPE html><html><body>
<style type="text/css">
table.gridtable {
  font-family: verdana,arial,sans-serif;
  font-size:12px;
  color: #333333;
  border-width: 1px;
  border-color: #666666;
  border-collapse: collapse;
}
table.gridtable th {
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  border-color: #666666;
  background-color: #dedede;
}
table.gridtable tr:nth-child(even) {
background-color: #fdf5e6;
}
table.gridtable td {
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  border-color: #666666;
  background-color: #ffffff;
}
</style>
<table class="gridtable" Align=center>
<tr>
<th>Output</th><th>Output</th><th>Output</th><th>Output</th></tr>
<tr>
<td align="center"><font color="#000000">Hello</font></td>
<td align="center"><font color="#000000">Hello</font></td>
<td align="center"><font color="#000000">Hello</font></td>
<td align="center"><font color="#000000">Hello</font></td>
</tr>
<tr>
<td align="center"><font color="#000000">Hello</font></td>
<td align="center"><font color="#000000">Hello</font></td>
<td align="center"><font color="#000000">Hello</font></td>
<td align="center"><font color="#000000">Hello</font></td>
</tr>
<tr>
<td align="center"><font color="#000000">Hello</font></td>
<td align="center"><font color="#000000">Hello</font></td>
<td align="center"><font color="#000000">Hello</font></td>
<td align="center"><font color="#000000">Hello</font></td>
</tr>
<tr>
<td align="center"><font color="#000000">Hello</font></td>
<td align="center"><font color="#000000">Hello</font></td>
<td align="center"><font color="#000000">Hello</font></td>
<td align="center"><font color="#000000">Hello</font></td>
</tr>
</table>
</body></html>

Answer 1

background上的table.gridtable td声明会覆盖条纹tr背景。

有很多方法可以解决这个问题。我将td背景移到tr，然后应用条带化。

＆＃13;

<!DOCTYPE html>
<html>

<body>
  <style type="text/css">
    table.gridtable {
      font-family: verdana,arial,sans-serif;
      font-size:12px;
      color: #333333;
      border-width: 1px;
      border-color: #666666;
      border-collapse: collapse;
    }
    table.gridtable th {
      border-width: 1px;
      padding: 8px;
      border-style: solid;
      border-color: #666666;
      background-color: #dedede;
    }
      table.gridtable tr {
        background-color: #ffffff;
      }
    table.gridtable tr:nth-child(even) {
    background-color: #fdf5e6;
    }
    table.gridtable td {
      border-width: 1px;
      padding: 8px;
      border-style: solid;
      border-color: #666666;
    }
  </style>
  <table class="gridtable" Align=center>
    <tr>
      <th>Output</th>
      <th>Output</th>
      <th>Output</th>
      <th>Output</th>
    </tr>
    <tr>
      <td align="center">
        <font color="#000000">Hello</font>
      </td>
      <td align="center">
        <font color="#000000">Hello</font>
      </td>
      <td align="center">
        <font color="#000000">Hello</font>
      </td>
      <td align="center">
        <font color="#000000">Hello</font>
      </td>
    </tr>
    <tr>
      <td align="center">
        <font color="#000000">Hello</font>
      </td>
      <td align="center">
        <font color="#000000">Hello</font>
      </td>
      <td align="center">
        <font color="#000000">Hello</font>
      </td>
      <td align="center">
        <font color="#000000">Hello</font>
      </td>
    </tr>
    <tr>
      <td align="center">
        <font color="#000000">Hello</font>
      </td>
      <td align="center">
        <font color="#000000">Hello</font>
      </td>
      <td align="center">
        <font color="#000000">Hello</font>
      </td>
      <td align="center">
        <font color="#000000">Hello</font>
      </td>
    </tr>
    <tr>
      <td align="center">
        <font color="#000000">Hello</font>
      </td>
      <td align="center">
        <font color="#000000">Hello</font>
      </td>
      <td align="center">
        <font color="#000000">Hello</font>
      </td>
      <td align="center">
        <font color="#000000">Hello</font>
      </td>
    </tr>
  </table>
</body>

</html>

＆＃13;

Answer 2

尝试从伪选择器中删除“空格”。

sw.WriteLine("table.gridtable tr: nth-child(even) {")

/** New code **/
sw.WriteLine("table.gridtable tr:nth-child(even) {")

CSS：交替表行颜色不起作用

2 个答案: