Bootstrap multiple input form in a table - html

Question

I want to create a table with several informational columns and one input.
I'm using bootstrap 3.0.
This is the example:
JsFiddle
The expected result is:
6 Columns:
1st and 2nd : would be string output.
3rd would be three inputs: Number, Letter, Letter
The rest are informational columns from three buttons: A, B, C.
The problem is that size of the third column is not matching the rest of the columns: 4, 5, 6.
Is it possible to achieve that only by changing the html?
The code:
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email number</label>
<input class="form-control" id="exampleInputEmail2" placeholder="Enter number" type="number">
</div>
Current wrong state with 3 rows of input:

Answer 1

Try using display:table-cell; for forms, and adjust width of inputs as you need, something like this:
.form-inline .form-control {
width: 50px;
display:table-cell;
}
.form-group{
display:table-cell;
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<table class="table table-striped table-advance table-hover">
<tbody>
<tr>
<td>John </td>
<td>Doe</td>
<td>
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email number</label>
<input class="form-control" id="exampleInputEmail2" placeholder="Enter number" type="number">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Enter Letter</label>
<input class="form-control" id="exampleInputEmail2" placeholder="Enter Letter" type="number">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Code Key</label>
<input class="form-control" id="exampleInputPassword2" placeholder="Key" type="text">
</div>
</form>
</td>
<td>
<div class="btn-row">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<input name="options" id="option1" type="radio"> A
</label>
<label class="btn btn-default">
<input name="options" id="option2" type="radio"> B
</label>
<label class="btn btn-default">
<input name="options" id="option3" type="radio"> C
</label>
</div>
</div>
</td>
<td>
<div class="btn-row">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<input name="options" id="option1" type="radio"> A
</label>
<label class="btn btn-default">
<input name="options" id="option2" type="radio"> B
</label>
<label class="btn btn-default">
<input name="options" id="option3" type="radio"> C
</label>
</div>
</div>
</td>
<td>
<div class="btn-row">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<input name="options" id="option1" type="radio"> A
</label>
<label class="btn btn-default">
<input name="options" id="option2" type="radio"> B
</label>
<label class="btn btn-default">
<input name="options" id="option3" type="radio"> C
</label>
</div>
</div>
</td>
</tr>
</tbody>
tbody>
</table>