1

I'm using the solution described at

How can I make a link from a <td> table cell

to make the td entries in my table hyperlinks. This is a nice and simple solution. But it's produces a side effect when I use display:block;. The hyperlink text is shifted upwards a little and is not centered. The image below shows the problem. If you look at the selected td "primary" you'll see it's too high.

Table td vertical alignment issue

Otherwise it's perfect as the highlighted td lines up with the blue th which is what I want.

How can I correct this?

The, simplified, code I'm using

----html----
<td>
    <div style="height:100%;width:100%;">
        <a href="my_url">
            primary
        </a>
    </div>
</td>

----css----
table {
background-color: White;
border: 10px solid Blue;
border-radius: 13px;
border-collapse: separate;
width: auto;
margin-top: 5px;
}

table th, td {
color: Black;
vertical-align: middle;
font-size: 20px;
font-weight: bold;
border: 0;
padding: 0px;
}

table th {
color: White;
background: Blue;
}

table a {
color: Black;
text-decoration: none;
display: block;
width: 100%;
height: 100%;
padding: 0px;
}

table a:hover {
color: White;
background: Blue;
}
Community
  • 1
  • 1
Shane Gannon
  • 6,770
  • 7
  • 41
  • 64

2 Answers2

1

Have you tried to use line-height?

   table a {
      ...
      line-height: 1em; //or your row measure in pixels
   }

This behavior happens because you display the a element as a block, with the fixed size of the table cell (heigh: 100%), but the text inside the element have lines which have a default size (not affected by the size of the element).

Filipe Merker
  • 2,428
  • 1
  • 25
  • 41
  • gmast posted a little after this answer but I found that answer more useful. Setting 1em caused "primary" to move up a bit more. Setting 2em was nearly correct but it was slightly too low. First time I came across em as a unit. It sounds good but seems a little unusual. Not sure I fully got what it was doing in this situation. – Shane Gannon Sep 30 '15 at 15:58
  • That is why i commentes this `//or your row measure in pixels` but be my guest, if you have no more doubt, this is what matters (: – Filipe Merker Sep 30 '15 at 16:04
1

A way to center vertically your link could be the use of line-height. You can assign a fixed height to the td and the same amount of pixels to the "a" line-height

td{ height: 30px; }
td a{ line-height: 30px; display: block; width: 100%; height: 100%;}
gmast
  • 192
  • 8