Why doesn't fill up but it has width and height on 100%

Question

I have the problem that I want a table with links. I have an as child from a tag like this:

<table>
    <tr>
        <td><a href="https://app.netlify.com/sites/controllpanel-chraebsli/overview">Controllpanel</a></td>
        <td><a href="https://app.netlify.com/sites/controllpanel-chraebsli/deploys"><img src="https://api.netlify.com/api/v1/badges/db717d14-d6ee-42c3-ae0e-3eb748d705aa/deploy-status"alt="Netlify Status"></a></td>
    </tr>
</table>

Now I want that the first fills up the which I tried with this:

a {
    text-decoration: none;
    color: #000;
    width: 100%;
    height: 100%;
}

That should fill the with the or not? On the picture below you can see that the only has the size of the text (1). But you can also see that it has the CSS like I mentioned (3) and that the is the child from (2).

Then why doesn't >a> fill up ? And how can I fill fill it up that has the same size as ?

anchor tags default to `display: inline`. make it `display: block`. — , Sep 17 '21 at 12:43

score 3 · Accepted Answer · answered Sep 17 '21 at 12:50

3

The reason is that the <a> tag by default is shown as display: inline, which doesn't respond to width and height CSS; you'd have to change it to display: inline-block which does.

Additionally, if your table cell has padding, and you want the <a> to fill it entirely, either remove the cell's padding or apply a negative margin to the anchor equal to the padding of the cell.

answered Sep 17 '21 at 12:50

RobA

128
1
7

2

This question, unsurprisingly, has been asked many times before. If it seems like a question is quite simple, please help us by finding the original question, rather than answering – Heretic Monkey Sep 17 '21 at 12:51

score 1 · Answer 2 · edited Sep 17 '21 at 12:50

1

Anchor tags are inline elements by default. Set them to display: block and your problem is solved!

edited Sep 17 '21 at 12:50

Sean

6,873
4
21
46

answered Sep 17 '21 at 12:45

naxsi

602
3
15

This question, unsurprisingly, has been asked many times before. If it seems like a question is quite simple, please help us by finding the original question, rather than answering. – Heretic Monkey Sep 17 '21 at 12:51
1

@HereticMonkey Sorry, i think that [this post](https://stackoverflow.com/questions/18585069/why-anchor-tag-does-not-take-height-and-width-of-its-containing-element) is the original question – naxsi Sep 17 '21 at 12:55
Then flag the question as a duplicate of that post. – Heretic Monkey Sep 17 '21 at 12:57

Why doesn't fill up but it has width and height on 100%

2 Answers2