Question

这是我的代码，我想通过我的类覆盖特定的css属性，我想覆盖border-bottom: 1px solid #e7b2b2;到border:none;到我的特定类竞价者，剩下的表我需要这个border-bottom。你可以帮我解决这个问题。我尝试了这个但没有工作

＆＃13;

.bidder tr {
  border: none !important;
}

table tr,
table th,
table td {
  border: none;
  border-bottom: 1px solid #e7b2b2;
  font-family: 'Lato', sans-serif;
  font-size: .875rem;
}

＆＃13;

<table id="content" width="100%" bgcolor="ffffff" border="0" cellpadding="0" align="center" cellspacing="0" class="bidder">
  <tbody>
    <tr>
      <td width="50">
        <img src="http://icons.veryicon.com/png/System/Super%20Mono%203D/auction%20hammer.png" width="40">
      </td>
      <td>
        <span style="font-size:11px; color:#000000; font-weight:bold;"> Product Name </span> <br>
        <span style="font-size:14px;  color:#3573a4;"> Testing Scraps redodfi jdfsfjksfjk hkdfs </span>
      </td>
      <td width="100" align="right">
        <img src="https://www.allbids.com.au/img/logo_xs.png" width="40"> &nbsp; <img src="http://marketplace.trainzauctions.com/themes/default/img/autobid.png" width="40">
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

Answer 1

您还需要覆盖表格标题（<th>）和表格单元格（<td>）的样式...

.bidder tr,
.bidder th,
.bidder td {
  border: none !important;
}

...您的选择器仅针对表格行，而不是单元格或标题。

Answer 2

问题是你只隐藏了底部边框。但是其他两个（th，td）元素的边界仍然存在。你也可以给他们一个选择器。

喜欢这个。这应该隐藏具有投标人类别的表格中的所有边界。

 .bidder  tr, .bidder th, .bidder td {
            border: none !important;
        }

Answer 3

您可以尝试使用以下代码，它可能会帮助您。

table th, table td {
  border: none;
  border-bottom: 1px solid #e7b2b2;
  font-family: 'Lato', sans-serif;
  font-size: .875rem;
}
.bidder th,
.bidder td {
   border: none;
}

在你的代码中，你使用border：none只用于tr元素，但你也为th和td元素添加了边框。所以你需要对th和td元素使用border：none。

Answer 4

只需在.bidder tr之后添加td，如下所示，以定位tr内的元素。

＆＃13;

.bidder tr td {
  border: none !important;
}

table tr,
table th,
table td {
  border: none;
  border-bottom: 1px solid #e7b2b2;
  font-family: 'Lato', sans-serif;
  font-size: .875rem;
}

＆＃13;

<table id="content" width="100%" bgcolor="ffffff" border="0" cellpadding="0" align="center" cellspacing="0" class="bidder">
  <tbody>
    <tr>
      <td width="50">
        <img src="http://icons.veryicon.com/png/System/Super%20Mono%203D/auction%20hammer.png" width="40">
      </td>
      <td>
        <span style="font-size:11px; color:#000000; font-weight:bold;"> Product Name </span> <br>
        <span style="font-size:14px;  color:#3573a4;"> Testing Scraps redodfi jdfsfjksfjk hkdfs </span>
      </td>
      <td width="100" align="right">
        <img src="https://www.allbids.com.au/img/logo_xs.png" width="40"> &nbsp; <img src="http://marketplace.trainzauctions.com/themes/default/img/autobid.png" width="40">
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

Answer 5

您需要在选择器列表中添加.bidder th, .bidder td。

.bidder tr,
.bidder th,
.bidder td{
  border: none !important;
}

table tr,
table th,
table td {
  border: none;
  border-bottom: 1px solid #e7b2b2;
  font-family: 'Lato', sans-serif;
  font-size: .875rem;
}

<table id="content" width="100%" bgcolor="ffffff" border="0" cellpadding="0" align="center" cellspacing="0" class="bidder">
  <tbody>
    <tr>
      <td width="50">
        <img src="http://icons.veryicon.com/png/System/Super%20Mono%203D/auction%20hammer.png" width="40">
      </td>
      <td>
        <span style="font-size:11px; color:#000000; font-weight:bold;"> Product Name </span> <br>
        <span style="font-size:14px;  color:#3573a4;"> Testing Scraps redodfi jdfsfjksfjk hkdfs </span>
      </td>
      <td width="100" align="right">
        <img src="https://www.allbids.com.au/img/logo_xs.png" width="40"> &nbsp; <img src="http://marketplace.trainzauctions.com/themes/default/img/autobid.png" width="40">
      </td>
    </tr>
  </tbody>
</table>

我想用class覆盖我的tr边框

5 个答案: