Changing colour of links in a thead > tr > th - Material Design for Bootstrap

Topic: Changing colour of links in a "thead > tr > th"

SecretOne pro asked 7 years ago

How do I change the colour of links in the following code.

table class="table table-sm table-striped table-hover table-responsive w-auto">
    <thead class="unique-color">
        <tr class="text-white">
            <th style="text-align: right">No.</th>
            <th style="text-align: left"><a href="view_partno.php?page=<?php echo $page; ?>&sort=partno">Part&nbsp;Number:</a></th>
            <th style="text-align: left"><a href="view_partno.php?page=<?php echo $page; ?>&sort=description">Description:</a></th>
            <th style="text-align: center">Image</th>
            <th style="text-align: left"><a href="view_partno.php?<?php echo $page; ?>&sort=category">Category:</a></th>
            <th style="text-align: left">Fits sweepers</th>
            <th style="text-align: center">Edit/Delete</th>
        </tr>
    <thead>

Currently I have had to "frig it" with the following css

thead tr th a { color: white; !important;}
thead tr th a:hover { color: darkgrey; !important;}
thead tr th a:visited { color: white; !important;}
thead tr th a:active { color: darkgrey; !important;}

It seems that a mdb class competing with it. CSS is not my strong point. Many thanks in advance, Andre

Add comment

Marta Szymanska staff pro premium answered 7 years ago

1 0 Best answer

Hi, add .white-text class to the <a href=""> tag:

<table class="table table-sm table-striped table-hover table-responsive w-auto">
 <thead class="unique-color">
  <tr class="text-white">
    <th style="text-align: right">No.</th>
    <th style="text-align: left"><a class="white-text" href="view_partno.php?page=<?php echo $page; ?>&sort=partno">Part&nbsp;Number:</a></th>
    <th style="text-align: left"><a class="white-text" href="view_partno.php?page=<?php echo $page; ?>&sort=description">Description:</a></th>
    <th style="text-align: center">Image</th>
    <th style="text-align: left"><a class="white-text" href="view_partno.php?<?php echo $page; ?>&sort=category">Category:</a></th>
    <th style="text-align: left">Fits sweepers</th>
    <th style="text-align: center">Edit/Delete</th>
  </tr>
 <thead>
</table>

Best, Marta

SecretOne pro commented 7 years ago

Hi Marta, Thank you for the reply, I will give it ago but I am sure I tried this method. I will let you know. Many thanks, Andre

SecretOne pro commented 7 years ago

Hi Marta, I tried this and yes the link went white but now I have no hover effect etc. If I remove colours from the table it works without any modification, but I do not want a white background for the header row/columns. Andre

Add comment

Marta Szymanska staff pro premium answered 7 years ago

1 0 Best answer

Hi, for hover effect you can add this CSS code:

a.white-text:hover {
 transition: all .2s ease-in-out;
 color: #eee !important;
}

We will add these settings to styles of MDB in the next release. Best, Marta

SecretOne pro commented 7 years ago

Hi Marta, Thank you very much that has done the trick :) getting just what I want now. Brilliant. Andre

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

User: Pro
Premium support: No
Technology: MDB jQuery
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

About author

SecretOne

Pro User

0Support score
2Questions 0Answers

0Snippets likes 0Snippets