时间戳

首页 > 解决方案 > 为什么即使我已经使用特定值尝试过边框颜色也不会改变

html - 为什么即使我已经使用特定值尝试过边框颜色也不会改变

问题描述

对不起，如果标题让你感到困惑，我想知道我的表格边框突然失去了颜色

  #my-table table {
    font-family: "Nunito", sans-serif;
    font-size: 18px;
    color: #1d3962;
    margin: 0% auto;
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    max-width: 1200px;
    border: none;
    border-top: none;
  }

  #my-table tr{
      border-top: solid 2px rgba(58, 115, 197, 0.1);
  }

  #my-table tr:nth-child(1){
      border-top: none;
  }

  #my-table tr:nth-last-child(1){
      border-bottom: none;
  }


  #my-table td{
  	width: 25%;
  }

  #my-table .first{
      border-top: solid 2px rgba(58, 115, 197, 0.4);
  }

  #my-table tr td:nth-child(1){
    padding: 0px 0px;
  }

  #my-table tr th:nth-child(2){
  	font-weight: bold;
	background-color: rgba(46, 207, 47, 0.1);
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    padding: 32px 38px;
  }

  #my-table tr td:nth-child(2){
	background-color: rgba(46, 207, 47, 0.1);
    padding: 32px 38px;
  }

  #my-table tr th:nth-child(3){
  	font-weight: bold;
	background-color: rgba(219, 206, 44, 0.1);
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    padding: 32px 38px;
  }

  #my-table tr td:nth-child(3){
	background-color: rgba(219, 206, 44, 0.1);
    padding: 32px 38px;
  }

  #my-table tr th:nth-child(4){
  	font-weight: bold;
	background-color: rgba(229, 76, 110, 0.1);
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    padding: 32px 38px;
  }

  #my-table tr td:nth-child(4){
	color: #E54C6E;
	background-color: rgba(229, 76, 110, 0.1);
    padding: 32px 38px;
	margin: 0% 15px;
  }

  #my-table .test{
  	padding-right: 20px;
  }

  #my-table tr td{
    padding: 32px 38px;
  }
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>

</head>
<body id="my-table">


<!--main division-->

<div style="overflow-x:auto;">
  <table>
    <tr>
      <th></th>
      <th>test</th>
      <th>test</th>
      <th>Free</th>
    </tr>

	<tr class="first">
      <td>test</td>
      <td>test</td>
      <td>test</td>
      <td>test</td>
    </tr>
    
    <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
      <td>test</td>
    </tr>
    
    <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
      <td>test</td>
    </tr>
    
  </table>
</div>

</body>
</html>

正如您在上面的代码片段中看到的，我的表格返回了边框颜色，但是当我在我的网络中尝试它时，颜色本身就消失了，即使我把代码和 css 像我在代码段中所做的那样，颜色也会丢失

你可以在边框顶部看到，颜色丢失了

有人可以帮我解决这个问题吗？或者告诉我我的代码有什么问题

标签： htmlcss

解决方案

如果要获取表格边框，请修改以下css：

#my-table table {
    border: none; // Remove this line
    border-top: none; // Remove this line
    border: 1px solid red; // Add this line
  }

推荐阅读