Question

这就是我现在的表格：

enter image description here

我希望复选框位于＆＃34; CMPT 310＆＃34;的右边。而不是低于它。我不能简单地将文本作为复选框的标签，因为当我点击文本时，我想要弹出课程的描述（即我不想要复选框进行检查）。这就是我现在如何在表中实现问题单元格（使用bootstrap）：

                <td>
                        <p data-toggle="modal" data-target="#CMPT310">CMPT 310</p> 
                        <div class="checkbox">
                        <label>
                          <input type="checkbox" value="">
                        </div>                                              
                </td>

以下是本页的其余部分供参考：

＆＃13;

<html>
<head>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-md-12"><img src="images/title.png" class="img-responsive"></div>
		</div>
		<div class="row">
			<h4><strong>Table I: Computing Science Concentrations<strong></h4>
		</div>		
		<table class="table table-bordered">
			<thead>
				<tr>
					<th>Artificial Intelligence</th>
					<th>Computer Graphics</th>
					<th>Computing Systems</th>
					<th>Information Systems</th>
					<th>Programming Languages and Software</th>
					<th>Theoretical Computing Science</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>
							<p data-toggle="modal" data-target="#CMPT310">CMPT 310</p> 
							<div class="checkbox">
						    <label>
						      <input type="checkbox" value="">
  							</div>												
					</td>
					<td>CMPT 361</td>
					<td><strong>CMPT 300</strong></td>
					<td>CMPT 301</td>
					<td>CMPT 373</td>
					<td><strong>CMPT 307</strong></td>
				</tr>
			</tbody>
		</table>		
	</div>


	<!-- START MODALS -->


	<!-- CMPT 310-->
	  <div class="modal fade" id="CMPT310" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	    <div class="modal-dialog">
	      <div class="modal-content">
	        <div class="modal-body">
	          <img class="img-responsive" src="images/cmpt310.png">
	        </div>
	        <div class="modal-footer">
	          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>         
	        </div>
	      </div>
	    </div>
	  </div>

</body>
</html>

＆＃13;

由于

Answer 1

将p内的checkbox和td设置为内嵌显示。

td p,
td .checkbox {
  display: inline;
}

td .checkbox {
  margin-left: 5px;
  margin-top: 0;
  position: absolute;
}

＆＃13;

td p,
td .checkbox {
  display: inline;
}
td .checkbox {
  margin-left: 5px;
  margin-top: 0;
  position: absolute;
}

＆＃13;

<html>

<head>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <img src="images/title.png" class="img-responsive">
      </div>
    </div>
    <div class="row">
      <h4><strong>Table I: Computing Science Concentrations<strong></h4>
    </div>
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>Artificial Intelligence</th>
          <th>Computer Graphics</th>
          <th>Computing Systems</th>
          <th>Information Systems</th>
          <th>Programming Languages and Software</th>
          <th>Theoretical Computing Science</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <p data-toggle="modal" data-target="#CMPT310">CMPT 310</p>
            <div class="checkbox">
              <label>
                <input type="checkbox" value="">
            </div>
          </td>
          <td>CMPT 361</td>
          <td><strong>CMPT 300</strong>
          </td>
          <td>CMPT 301</td>
          <td>CMPT 373</td>
          <td><strong>CMPT 307</strong>
          </td>
        </tr>
      </tbody>
    </table>
  </div>


  <!-- START MODALS -->


  <!-- CMPT 310-->
  <div class="modal fade" id="CMPT310" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body">
          <img class="img-responsive" src="images/cmpt310.png">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

</body>

</html>

＆＃13;

表格单元格中的一行上的文本和复选框，bootstrap

1 个答案: