Alejandro Alejandro - 5 months ago 10
CSS Question

Text-decoration: none using table --having trouble

Although this may seem trivial to most of you, for some I can't get the

text-decoration:none
apply in a table cell as shown in the below.

What am I doing wrong with my css?

Any inputs will be greatly appreciated



table{
font-size: 50px;
}

table a{
text-decoration: none;
}

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css" rel="stylesheet"/>
<div>
<table>
<tbody>
<tr>
<td>
<a href="http://www.google.com"><i class="fa fa-quote-left" aria-hidden="true"></i></a>
<p>Quote Master</p>
</td>
</tr>
</tbody>
</table>
</div>




Answer

If you want the black color, apply color: inherit to the anchor tag.

Generally the color of the anchor tag is 'purple'(#0000EE;), if you see any where,
Eg: google search results all links consists purple color links.

If we apply color: 'inherit', the parent's color will be applied to the anchor overriding the default color, if it also not black, you can explicitly declare color: 'black' to that anchor.

table{
  font-size: 50px;
  }

table a{
  text-decoration: none;
  color: inherit
 }
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css" rel="stylesheet"/>
        <div>
          <table>
            <tbody>
              <tr>
                <td>
                    <a href="http://www.google.com"><i class="fa fa-quote-left" aria-hidden="true"></i></a>
                    <p>Quote Master</p>
                </td>
              </tr>
              </tbody>
          </table>
      </div>