如何使用表格模式文本框

Question

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

＆＃13;

＆＃13;

<!-- 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>
				

＆＃13;

＆＃13;

＆＃13;

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>