CODEWITHSUNDEEP
htmlcss
Rakish Frisky
Rakish Frisky

Reputation: 675

Why my border color doesn't change even If I already tried it using specific value

I'm sorry if the title make you confused, I wonder my table border suddenly lost it color

  #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>

As you can see in the snippet above, my table give back the border color but when I try it in my web the color itself is gone, even I put it the code and the css like I make in the snippet the color is lost

You can see at the border top, the color is lost

can someone help me to solve this? or tell me what's wrong with my code

Upvotes: 0

Views: 186

Answers (1)

Mehadi Hassan
Mehadi Hassan

Reputation: 1230

If you want to get the table border then please modify the below css:

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

Upvotes: 2

Related Questions