CODEWITHSUNDEEP
htmlcss
sansan
sansan

Reputation: 833

I want to override my tr border using class

Here is my code, i want to override the particular css properties through my class , I want to override border-bottom: 1px solid #e7b2b2; to border:none; to my specific class bidder, remaining table i need this border-bottom. can you anyone help me regarding this. I tried this but not working

.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;
}
<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>

Upvotes: 0

Views: 66

Answers (5)

AG_
AG_

Reputation: 2689

You need to add .bidder th, .bidder td in selector list.

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

Upvotes: 2

claudios
claudios

Reputation: 6656

Just add td after your .bidder tr just like below to target the element inside tr. 

.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;
}
<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>

Upvotes: 2

Simrandeep Singh
Simrandeep Singh

Reputation: 585

You can try using the following code and it may help you out.

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;
}

In your code you are using border:none for only tr element but you are adding border for th and td elements as well. So you need to use border:none for th and td elements too.

Upvotes: 2

Kanni Farhad
Kanni Farhad

Reputation: 48

The problem is you hide only tr bottom border. But borders in other two (th,td) elements is still exists. You would give a selector to them too.

Like this. This should hide all borders in table which has bidder class.

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

Upvotes: 2

Jayx
Jayx

Reputation: 3966

You need to override the styles for table headings (<th>) and table cells (<td>) as well ...

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

... your selector only targets the table row, and not the cells or headings.

Upvotes: 2

Related Questions