边框颜色与我的文字颜色相同（css / html）

Question

我在创建表时遇到问题，我想根据特定条件更改文本颜色，但由于某些原因，单元格边框与我的文本颜色相同。

这是代码

.tg {
  border-collapse: collapse;
  border-spacing: 0;
}

.tg td {
  font-family: Arial, sans-serif;
  font-size: 14px;
  padding: 10px 5px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
}

.tg th {
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  padding: 10px 5px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
}

.tg .tg-baqh {
  text-align: center;
  vertical-align: top
}

.tg .tg-edkd {
  color: #9a0000;
  text-align: center;
  vertical-align: top
}

.tg .tg-kxdw {
  font-weight: bold;
  background-color: #036400;
  color: #ecf4ff;
  text-align: center;
  vertical-align: top
}

.tg .tg-24w0 {
  font-weight: bold;
  font-size: 22px;
  background-color: #ffffff;
  text-align: center;
  vertical-align: top
}

.tg .tg-9ewa {
  color: #fe0000;
  text-align: center;
  vertical-align: top
}

.tg .tg-yw4l {
  vertical-align: top
}

.tg .tg-cd3k {
  font-weight: bold;
  background-color: #036400;
  color: #ffffff;
  text-align: center;
  vertical-align: top
}

.tg .tg-zlvv {
  color: #3531ff;
  text-align: center;
  vertical-align: top
}

<table class="tg">
  <tr>
    <th class="tg-24w0" colspan="6">Nomenclature de Nomenclature, OF054453, OF054581, OF054600, OF054395, OF054063,</th>
  </tr>
  <tr>
    <td class="tg-kxdw">Action</td>
    <td class="tg-kxdw">Poste</td>
    <td class="tg-kxdw">Pièce</td>
    <td class="tg-kxdw">Description</td>
    <td class="tg-kxdw">Quantité initiale ? Nouvelle quantité</td>
    <td class="tg-kxdw">Code lien procédure</td>
  </tr>
  <tr>
    <td class="tg-9ewa">Retirer</td>
    <td class="tg-baqh">4000</td>
    <td class="tg-baqh">TJA1050TD-T</td>
    <td class="tg-baqh">CI COM H-SPEED CAN TX SO8 SMT</td>
    <td class="tg-edkd">1 ? 0</td>
    <td class="tg-baqh">PM120</td>
  </tr>
  <tr>
    <td class="tg-yw4l" colspan="6">Commentaire Ligne : </td>
  </tr>
  <tr>
    <td class="tg-yw4l" colspan="6">Remarques : </td>
  </tr>

</table>

Answer 1

在.tg td上指定边框颜色以及边框宽度和样式，就像在此编辑的代码段中一样：

.tg {
  border-collapse: collapse;
  border-spacing: 0;
}

.tg td {
  font-family: Arial, sans-serif;
  font-size: 14px;
  padding: 10px 5px;
  border: 1px solid #000;
  overflow: hidden;
  word-break: normal;
}

.tg th {
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  padding: 10px 5px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
}

.tg .tg-baqh {
  text-align: center;
  vertical-align: top
}

.tg .tg-edkd {
  color: #9a0000;
  text-align: center;
  vertical-align: top
}

.tg .tg-kxdw {
  font-weight: bold;
  background-color: #036400;
  color: #ecf4ff;
  text-align: center;
  vertical-align: top
}

.tg .tg-24w0 {
  font-weight: bold;
  font-size: 22px;
  background-color: #ffffff;
  text-align: center;
  vertical-align: top
}

.tg .tg-9ewa {
  color: #fe0000;
  text-align: center;
  vertical-align: top
}

.tg .tg-yw4l {
  vertical-align: top
}

.tg .tg-cd3k {
  font-weight: bold;
  background-color: #036400;
  color: #ffffff;
  text-align: center;
  vertical-align: top
}

.tg .tg-zlvv {
  color: #3531ff;
  text-align: center;
  vertical-align: top
}

<table class="tg">
  <tr>
    <th class="tg-24w0" colspan="6">Nomenclature de Nomenclature, OF054453, OF054581, OF054600, OF054395, OF054063,</th>
  </tr>
  <tr>
    <td class="tg-kxdw">Action</td>
    <td class="tg-kxdw">Poste</td>
    <td class="tg-kxdw">Pièce</td>
    <td class="tg-kxdw">Description</td>
    <td class="tg-kxdw">Quantité initiale ? Nouvelle quantité</td>
    <td class="tg-kxdw">Code lien procédure</td>
  </tr>
  <tr>
    <td class="tg-9ewa">Retirer</td>
    <td class="tg-baqh">4000</td>
    <td class="tg-baqh">TJA1050TD-T</td>
    <td class="tg-baqh">CI COM H-SPEED CAN TX SO8 SMT</td>
    <td class="tg-edkd">1 ? 0</td>
    <td class="tg-baqh">PM120</td>
  </tr>
  <tr>
    <td class="tg-yw4l" colspan="6">Commentaire Ligne : </td>
  </tr>
  <tr>
    <td class="tg-yw4l" colspan="6">Remarques : </td>
  </tr>

</table>

Answer 2

使用secund属性：

<style>
	
	table {
		border-collapse: collapse;
	}

	.tg	{
		font-weight: bold;
		text-align: center;
		padding: 6px 12px;
		border: 1px solid #333;
	}
	.red {
		color: red;
	}
	.green {
		color: green;
	}
	
</style>
	
<table>
	<tr>
		<td class="tg">Text 1</td>
		<td class="tg red">Text 2</td>
		<td class="tg green">Text 3</td>
	</tr>
</table>	

Answer 3

颜色CSS属性设置元素的文本内容和文本修饰的前景颜色值。它还设置currentcolor值，该值可用作其他属性的间接值，并且是其他颜色属性的默认值，例如border-color。 Ref

要解决此问题，只需将border-color属性添加到.tg td，如下所示：

.tg td {
  border-color:black;
  font-family: Arial, sans-serif;
  font-size: 14px;
  padding: 10px 5px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
}