表格单元格中一行上的文本和复选框，引导程序答案

【问题标题】：text and checkbox on one line within a table cell, bootstrap表格单元格中一行上的文本和复选框，引导程序
【发布时间】：2015-10-10 17:44:59
【问题描述】：

这就是我的桌子现在的样子：

我希望复选框位于“CMPT 310”的右侧而不是其下方。我不能简单地将文本作为复选框的标签，因为当我单击文本时，我希望弹出课程描述（即我不想选中复选框）。以下是我现在如何在表格中实现问题单元格（使用引导程序）：

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

这是页面的其余部分供参考：

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

谢谢

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

将td元素内的p和checkbox设置为内联显示。

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

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

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

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

【讨论】：

几乎做到了，谢谢！但是，现在复选框和文本没有水平对齐（复选框略高）。有没有简单的解决方法？
我玩过填充并得到了它。
你能解释一下 td p, td 吗？复选框语法？英文是什么意思？
是的，这意味着您的目标是每个 td 元素内的段落和复选框。知道了？ :)
那么第二条规则针对 td 元素中的每个复选框？对于第一条规则，第二条 td 的目的是什么？要指定我们针对每个 td 元素内的段落和复选框，我希望看到一个 td、一个 p 和一个复选框。