0

I am creating a table which has 5 columns in Bootstrap. Too make it responsive I have used footable theme. However, if one of the contents of my column is too large, the column becomes extremely large & the table out of proportion. What is the best way to go about this?

    <div class="container table-responsive">
        <table class="table table-striped toggle-circle-filled">
          <thead>
          <tr>
            <th  data-hide="phone, table">A</th>
            <th data-toggle="true">ID</th>
            <th data-hide="phone">C</th>
            <th data-hide="phone, tablet">D</th>
            <th>Status</th>
          </tr>
          </thead>
          <tbody>
          ....
          </tbody>
      </table>
</div>
user1692342
  • 5,007
  • 11
  • 69
  • 128

1 Answers1

-1

try assigning a defined width for each of the columns

example -

 <div class="container table-responsive">
        <table width=100% class="table table-striped toggle-circle-filled">
          <thead>
          <tr>
            <th  data-hide="phone, table">A</th>
            <th data-toggle="true">ID</th>
            <th data-hide="phone">C</th>
            <th data-hide="phone, tablet">D</th>
            <th>Status</th>
          </tr>
          </thead>
          <tbody>
          <tr>
          <td width="20%"></td>
          <td width="20%"></td>
          <td width="20%"></td>
          <td width="20%"></td>
          <td width="20%"></td>
          </tbody>
      </table>
</div>
Roots_Dev
  • 9
  • 2