I am presenting the following data in a table:
<table class="neo-table">
<tr>
<td>Day of final discharge home</td>
<td>{{ form_widget(form.mHomeDischargeDay, {'id': 'M_Home_discharge_day', 'attr':{'style':'width:60px'}})}}</td>
<td><input type="button" value="enter date" onclick="convertDate('M_Home_discharge_day')"></td>
</tr>
<tr>
<td >Weight at final discharge</td>
<td colspan="2"><div class="input-group">{{ form_widget(form.mHomeWeight, {'attr':{'style':'width:80px'}})}}<div class="input-group-addon">g</div> </div></td>
</tr>
<tr>
<td >Head circumference at final discharge</td>
<td colspan="2"><div class="input-group">{{ form_widget(form.mHomeHeadCirc, {'attr':{'style':'width:80px'}})}}<div class="input-group-addon">cm</div> </div></td>
</tr>
<tr>
<td>Length at final discharge</td>
<td colspan="2"><div class="input-group">{{ form_widget(form.mHomeLength, {'attr':{'style':'width:80px'}})}}<div class="input-group-addon">cm</div></div></td>
</tr>
<tr>
<td>Enteral feeding at final discharge</td>
<td>{{ form_widget(form.mHomeFeeding)}}</td>
<td></td>
</tr>
</table>
When viewed on Chrome browser, it displays perfectly as shown here: https://i.sstatic.net/NK9ak.jpg However, on Mozilla browser, the alignment of the group addon is not correct: https://i.sstatic.net/fJIed.jpg
I attempted to resolve this by adding:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" rel="stylesheet"/>
As indicated in this post: Input group addon alignment
Nevertheless, I have yet to pinpoint the source of the issue and the solution for fixing it.
Edit: I also encountered a similar issue with simpler code:
<table style="width: 100%";>
<tr>
<td>row1 col1</td>
<td>row1 col2</td>
<td>row1 col3</td>
</tr>
<tr>
<td >row2 col1</td>
<td colspan="2"><div class="input-group">row2 col2<div class="input-group-addon">row2 col2</div> </div></td>
</tr>
</table>
Upon inspection using Mozilla Firefox, the output appeared like this: https://i.sstatic.net/uUDuH.jpg My goal is to have "row2 col2" located next to "row2col2" seamlessly. How can this be achieved?