I have a simple HTML page. There is a table which width is 500 pixels. The table has one cell which inluced a hyperlink. The hyperlink should be displayed as a block which width is 100% of td's width.

Anyway, the hyperlink is not displayed as I want. It will be displayed as an inline-block and its font-weight is 500 instead of 400 which it should be. At the same time, the font size 12 pixels while it should be 11 pixels.

I do not know what is wrong with my HTML and CSS codes. Maybe you know and could help me.

```
<table style="width: 500px">
  <tr>
    <td style="width: 100%"><a href="go.html" class="painike painike-hae-muokattavaksi" data-bio="1">Name</a></td>
  </tr>
</table>

.painike {
  box-sizing: content-box;
  height: 18px;
  padding-left: 6px;
  padding-right: 6px;
  padding-top: 1px;
  padding-bottom: 3px;
  border: none;
  margin: 1px;
  background-color: #323B5A;
  font-family: "Exo 2", Tahoma, sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: #FFFFFF;
  text-decoration: none;
  line-height: 18px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

a.painike:link, a.painike:visited {
  color: #FFFFFF;
  text-decoration: none;
  font-family: "Exo 2", Tahoma, sans-serif;
  font-weight: 500;
  font-size: 12px;
  display: inline-block;
}

.painike:active, .painike:hover {
  margin: 1px;
  background-color: #B4166F;
}

.painike.painike-hae-muokattavaksi {
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 5px;
  padding-right: 5px;
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  color: #FFFFFF;
  text-decoration: none;
  display: block;
  margin: 0;
  box-sizing: content-box;
  height: 22px;
  line-height: 22px;
  text-align: left;
  font-family: "Exo 2", Tahoma, sans-serif;
  font-weight: 400;
  font-size: 11px;
  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
}

```