Как выровнять ячейки одного столбца с другими столбцами в адаптивной таблице?

Question

Я пытаюсь создать адаптивную таблицу.Первый столбец - только текстовое значение, но другие столбцы имеют текстовое значение и кнопку.При использовании тега hr смещение ячеек достаточно заметно.Вот демоверсия plunker .

Есть ли способ выровнять ячейки при сохранении отзывчивости стола?Следующий код не является точным.

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