[SOLVED](code doubt) <td> not occupying full screen width

Question

SEE MY CODE, i have THREE PROBLEMS/BUGS:
☑️✅( 1.[FIXED] ) Element 39 i.e., Yttrium has no border in table mode and
✅☑️( 2.[FIXED] ) searching elements is functioning properly but also gives names of elements that we don't want like searching hydrogen gives hydrogen as expected but also mietnerium.
( 3.[FIXED] ) in list mode 100% table cell width is not occupying full screen width and 100vh/vw are misbehaving, how can i make my <td> cells of full screen width properly?

🙏🏻PLEASE HELP ME FIX THESE BUGS!🙏🏻

https://code.sololearn.com/WmmTS2FcI01A/?ref=app

Answer 1

🔥ⒹΞVΞⓈᕼ
1. Remove the property scale(1.1) for td. This will help you to get rid of bug no 1.

You are facing a problem because scale(1.1) increases the size of the boxes which is hiding the border of Yttrium.
[SOLVED]

2. You have not added the sub tag for mietnerium which cause it now to get removed when we search something because you are looping through the sub tags to remove elements.

So, add the sub tag for it so that it gets removed and comes only when someone search for it.

3. Update your td class property to :-

```
.td{
display: flex;
flex-direction: column;
width: calc(100vw - 4px);
text-align: center;
border-width: 1px;
padding-top: 2px;
margin-left: 4px;
margin-top:10px;
border-right: none;
box-sizing:border-box;
}
```

Hope this might help

Answer 2

🔥ⒹΞVΞⓈᕼ solved ( i guess) bug no 3 check it out

Answer 3

🔥ⒹΞVΞⓈᕼ solved bug no 2 check it

Answer 4

🔥ⒹΞVΞⓈᕼ don't worry bro it's a small mistakes that even professionals do. And as we all know we learn from our mistakes. 🙂🙂

So, be happy that you learnt something.

Answer 5

Krish can't believe I'm such a fool!😳
Thanks for noticing this mistake! That is a real shame for me!

Answer 6

Krish yeah the main problem was that i was using transform:scale(1.2) unnecessarily and that was affecting the code badly... I arrived previously what you say now... Thanks for your help... YOU'RE A PRO

Answer 7

I see

👍👍👍