如何使用表在模态文本框

Question

我设计了模态。其中包含文本框。在第一行有两个文本框，其中列着名为"添加另一个"的按钮。在第二行中有三个文本框，后面的行相同。在移动视图中，内容是浮动的框。我需要在模态中显示文本框。请帮忙

<!-- 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;">&times;</span></a></font></button>
<div class="form-body">
<label class=" col-sm-4">Edit &nbsp;&nbsp; View &nbsp;&nbsp; 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

我已经为你做了这个

.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;">&times;</span></a></font></button>
<div class="form-body">
<label class=" col-sm-4">Edit &nbsp;&nbsp; View &nbsp;&nbsp; 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>