How to text boxes in modal using table - html

Question

I designed modal. Which contains text boxes. In first row there are two text boxes and there column its button called add another. And in second row there are three text boxes and following rows same.In mobile view the content is floating of the box. I need to show text boxes in the modal. please help
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="panel-body">
<div class="panel panel-default">
<button type="button" class="close" data-dismiss="modal">
<font color="black"> <a href="hrtoolkit.html" style="color:darkred">
<span style="color:darkred;">×</span></a></font></button>
<div class="form-body">
<label class=" col-sm-4">Edit View Save</label>
<br /><br />
<table id="table1">
<tbody>
<tr>
<td></td>
<td ><input type="text" placeholder="10th"/></td>
<td > <input type="text" placeholder="Degree" /></td>
<td > <button type="button" class="btn btn-default "
data-toggle="collapse" data-target="#filter-panel"
style="font-size: 9px; background-color: #ccc; font-weight: bold;">Add
Another</button>
</td>
</tr>
<tr>
<td >Stream<input type="text" placeholder="Stream"/></td>
<td > Institution<input type="text" placeholder="Institution" /></td>
<td >Yr of Passing <input type="text" placeholder="Yr of Passing" /></td>
</div>
</tr>
<tr>
<td >State<input type="text" placeholder="State"/></td>
<td >Country <input type="text" placeholder="Country" /></td>
<td > <input type="file" /></td>
</div>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

I have done this for you
.form-body {
overflow-x: scroll;
}
table tbody tr td {
padding: 0 10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body">
<div class="">
<div class="row">
<div class="col-md-6">
<div class="panel-body">
<div class="panel panel-default">
<button type="button" class="close" data-dismiss="modal">
<font color="black"> <a href="hrtoolkit.html" style="color:darkred">
<span style="color:darkred;">×</span></a></font></button>
<div class="form-body">
<label class=" col-sm-4">Edit View Save</label>
<br />
<br />
<table id="table1">
<tbody>
<tr>
<td></td>
<td>
<input type="text" placeholder="10th" />
</td>
<td>
<input type="text" placeholder="Degree" />
</td>
<td>
<button type="button" class="btn btn-default " data-toggle="collapse" data-target="#filter-panel" style="font-size: 9px; background-color: #ccc; font-weight: bold;">Add Another
</button>
</td>
</tr>
<tr>
<td>Stream
<input type="text" placeholder="Stream" />
</td>
<td> Institution
<input type="text" placeholder="Institution" />
</td>
<td>Yr of Passing
<input type="text" placeholder="Yr of Passing" />
</td>
</tr>
<tr>
<td>State
<input type="text" placeholder="State" />
</td>
<td>Country
<input type="text" placeholder="Country" />
</td>
<td>
<input type="file" />
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>