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

标签 html css

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

  #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 中,就像我在代码片段中所做的那样颜色丢失了

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

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

最佳答案

如果你想获得表格边框,请修改下面的css:

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

关于html - 为什么即使我已经使用特定值尝试过,我的边框颜色也不会改变,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59403282/

相关文章:

html - 我试着让三张图片并排 float ,宽度为 33%。为什么右边有多余的空间?

javascript - 如何保持 div 大小静态,即使其中文本的字体大小发生变化

ASP.Net 母版页不响应 Site.css 更改

html - 无法在导航栏上方添加空间

html - 以 Angular 发布数据时出现错误请求错误

c# - 如何更改 Asp.Net 中 customErrors 页面的默认行为

android - 这是 Android 中用于应用索引的链接元素的正确格式吗?

javascript - 使用 JQuery 链接动态创建的下拉列表

css - 将响应图像附加到底部

html - 如何在不使用最小宽度或精确固定宽度的情况下使元素水平滚动?