I have been puzzled by the fact that I am unable to adjust the width of the table th in Firefox browser to the smallest value. However, in Chrome browser, this functionality works perfectly. I simply want to divide the values of my td into three rows as shown in the image below but specifically in Firefox.
Here is how it appears in Chrome:
https://i.sstatic.net/Q4hxJ.png
And here is how it looks in Firefox where it doesn't work as intended:
https://i.sstatic.net/qKbtC.png
Below is the entire HTML code snippet for reference:
<section class="users-list-wrapper">
<div class="users-list-table">
<div class="card">
<div class="card-content">
<div class="card-body">
<div class="table-responsive">
<table class="table" name="table" id="table">
<thead>
<tr>
<th colspan="9">
<div class="titles">
<h3>This is Header title <br style="line-height: 20%;">
<span class="header2"> SubHeader title</span>
</div>
</th>
</tr>
<tr>
<th colspan="4" style="text-align: left;">
<span class="municipality">Header</span>
</th>
</tr>
<tr class="heads">
<th class="heads">No</th>
<th width="5%" class="heads">ID Number</th>
<th class="heads">Name</th>
<th width="2%" class="heads">Country</th>
<th class="heads">Data total</th>
</tr>
</thead>
<tbody class="report-content">
<tr>
<td></td>
<td>1235</td>
<td>Jason</td>
<td width="10px;">PH-COVID-160203000-00010165</td>
<td class="lenss"></td>
</tr>
<tr>
<td></td>
<td>1235</td>
<td>Jason</td>
<td>United States</td>
<td class="lenss"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>