Question 45331 in Html Question posted in
Some basic documentation can be found here.

How to make td (table cell) height to be the same as an < a> (link element) height? – Html

I have created a simple example https://jsfiddle.net/9usfctbp/ that contains the issue.

There is a code from fiddle:

<table>
  <tr>
    <td>
      <a href="#">
        Link
      </a>
    </td>
  </tr>
</table>

a {
  display: block;
  font-size: 16px;
  line-height: 16px;
}

Expected result: td has height 16px the same as a link.

Actual result: td has height 18px that is 2px more than a link height.

Tags:

2

Answers


  1. 0

    try removing the padding from the td elements :

    /* if you only want to keep the same height */
td {
   padding-top: 0;
   padding-bottom: 0;
}

/* or remove the padding from all edges */

td {
   padding: 0;
}
    Login or Signup to reply.
  2. 0

    set margin,padding, border, td element to 0 and set its line-height property to same value of font-size of the a element

    table {
  border-collapse: collapse;
}

td {
  padding: 0;
  margin: 0;
  border: none;
  line-height: 16px;
}

a {
  display: block;
  font-size: 16px;
  line-height: 16px;
}
    <table>
  <tr>
    <td>
      <a href="#">
        Link
      </a>
    </td>
  </tr>
</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search