Reduce row table height in html/css - html

Question

I know many people ask for the same issue but I cannot figure out how to solve this.
I have this table and I want to reduce the space between rows so the yellow info is closer to the title
I tried with negative margin but it does not work.
Here is the code I use for the first yellow message
<div class="visible-mobile">
<div class="header-panel-mobile" cellpadding = "0" cellspacing = "0" style=" height: 50vw; width: 85vw; margin-right: auto; margin-left: auto;background-color: #eaeaea;border-radius: 10px;">
<table class="header-table-mobile" style="border-collapse: collapse; border-spacing: 0;">
<tr>
<td class="font-roboto font-12 " style="padding-top: 3vw; text-align: center; width: 1vw; color:#4d4c4c; font-weight: 900">
<legend class="legend font-roboto font-12" style="width: 100%">{% trans %}alert_level_caps{% endtrans %}</legend>
</td>
</tr>
<!-- SEPARADOR HORIZONTAL -->
<tr>
<td class="">
<hr style="height: 0.015vh; width:7%; border-width: 0; color: #f7a800; background-color: #f7a800; margin-right: auto; margin-left: auto">
</td>
</tr>
<!-- BARRA NIVEL DE ALERTA -->
<tr>
<td class="" style="width: 100%; height: 6%; text-align: center; vertical-align: top">
<!-- FIELDSET NIVEL DE ALERTA -->
<fieldset id="barra-dispositivo-movil" class="fieldsetGris centeredFieldset font-roboto font-12" style="height: 2vw; width: 40vw; display: flex; justify-content: center; align-items: center; margin-right: auto; margin-left: auto; border-radius: 10px;">
<!-- TEXTO ALERTA -->
<div id="" class="" style="">
<p id="textAlarm" class="" style="color:#FFFFFF">--</p>
</div>
</fieldset>
</td>
</tr>
About the header table mobile class it's just this.
.header-table-mobile {
width: 100%;
margin: 0 0;
margin-top: 0;
}
Can you tell me how do I decrease the size please? I would like to overlap them if is not possible to decrease the space.

Answer 1

That is because of the margin of hr
Try this in the CSS:
.header-table-mobile tr hr {
margin: 0;
}