CODEWITHSUNDEEP
cssbootstrap-4
sinisteraadi
sinisteraadi

Reputation: 148

How to align the cells of one column with other columns in a responsive table?

I am trying to create a responsive table. The first column is only text value but other columns have text value and a button. While using hr tag, the misalignment of cells is quite visible. Here's a plunker demo.

Is there any way to align the cells while keeping the table responsive? The following code isn't accurate.

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

Upvotes: 0

Views: 216

Answers (1)

Mohan
Mohan

Reputation: 334

You should be having < td > for every cell as shown below and alignment would get fixed

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

Upvotes: 1

Related Questions