如何为表格行设置交替颜色且保持边框颜色不变

嘿，我来帮你搞定这个表格样式的问题～

首先得给你吃个定心丸：你当前写的tbody tr:nth-child(even) { color: red; }其实只会改变行内文本的颜色，边框颜色根本不会被这个属性影响！不过要是你想更稳妥，彻底避免边框颜色被其他样式（比如继承或者后续新增的样式）干扰，最好的办法就是显式给表格和单元格指定固定的边框颜色。

具体修改很简单，只需要在你的CSS里给table、td和th加上border-color属性就行，比如：

table { 
  border-collapse: collapse; 
  border-style: solid; 
  border-width: thin;
  /* 固定表格外边框的颜色 */
  border-color: #000;
} 
td, th { 
  border-style: solid; 
  border-width: thin; 
  padding-left: 4px; 
  padding-right: 4px;
  /* 固定单元格边框的颜色，确保不会受行样式影响 */
  border-color: #000;
} 
tbody tr:nth-child(even) { 
  /* 只修改文本颜色，边框完全不受影响 */
  color: red; 
}

这样设置之后，不管你后续怎么调整行的文本颜色（比如改成蓝色、绿色），表格和单元格的边框都会牢牢保持你指定的颜色（这里是黑色#000），完全不会跟着变。原因很简单：color属性管的只是文本和少数继承性前景色，而边框颜色是由专门的border-color属性控制的，只要你显式指定了，就不会被其他样式干扰。

修改后的完整HTML代码可以参考下面的示例：

<html>
<table>
<tbody>
<tr><td>One</td><td>...</td></tr>
<tr><td>Two</td><td>...</td></tr>
<tr><td>Three</td><td>...</td></tr>
<tr><td>Four</td><td>...</td></tr>
<tr><td>...</td><td>...</td></tr>
</tbody>
</table>
</html>

你也可以把border-color的值换成你喜欢的任何颜色，比如深灰色#333、蓝色#0066cc都可以，完全根据你的需求来调整～

内容来源于stack exchange