Question

我正在尝试创建一个响应表。第一列仅是文本值，其他列具有文本值和一个按钮。使用hr标签时，单元格的未对准非常明显。这是plunker demo。

有什么方法可以在保持表格响应的同时对齐单元格？以下代码不正确。

<div class="table-responsive">
  <table class="table table-striped table-bordered hover col-sm-11 ">
    </td>
    <td>
      <div>4</div><br>
      <div id="roomID1"><button type="button" class="btn btn-primary" onclick="showPopUp();">Book Now</button></div>
      <hr>
      <div>12</div><br>
      <div id="roomID2"><button type="button" class="btn btn-primary" onclick="showPopUp();">Book Now</button></div>
      <hr>
      <div>12</div><br>
      <div id="roomID2"><button type="button" class="btn btn-primary" onclick="showPopUp();">Book Now</button></div>
      <hr>
    </td>
    </tr>
  </table>
</div>
</div>

Answer 1

您应该为每个单元格设置，如下所示，对齐方式将得到固定

<td>
    <div><strong>AC Room - 4 Bed<br>
    <font style="color:green;"> (Capacity:4 Person)</font><br>
    <font style="color:purple;"> (Charges: 1250 INR)</font><br>
    </strong><hr>
    </div>

</td>
<td>

    <div><strong>AC Room - Double Bed<br>
    <font style="color:green;"> (Capacity:2 Person)</font><br>
    <font style="color:purple;"> (Charges: 850 INR)</font><br>
    </strong><hr>
    </div>

</td>

如何在响应表中将一列的单元格与其他列对齐？

1 个答案: