align column on 2 different bootstrap table

css, html, twitter-bootstrap, twitter-bootstrap-3

Solution

Adding to Eren Akkus's proposition, besides, you can specify width in each column, using typical `col-*` classes. In this way:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="table-responsive">
  <table class="table">
    <colgroup>
      <col class="col-xs-2"></col>
      <col class="col-xs-6"></col>
      <col class="col-xs-4"></col>
    </colgroup>
    <thead>
      <tr>
        <th>TH1</th>
        <th>TH2</th>
        <th>TH3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>TD1</td>
        <td>TD2</td>
        <td>TD3</td>
      </tr>
    </tbody>
  </table>
</div>

This special mechanism is not indicated in official documentation but the framework is ready for it.

Problem

I have two bootstrap table display vertically. they contain the same title head, but the content length on cell is variable. The end result look very sad, I would like to have those table column align "as" it was a very big table, which allow user to read it easely (exemple here): https://jsfiddle.net/5qn79j4f/1/ ``` <div class="row"> <div class="col-sm-12"> <div class="table-responsive"> <table class="table table-hover table-bordered"> <thead> <tr> <td class="table-colspan" colspan="6">Wednesday</td> </tr> </thead> <tr class="title-tr"> <td>yolo</td> <td>2</td> <td>x</td> <td>x</td> <td>5</td> <td>x</td> </tr> <tr> <td>yolo</td> <td>yolo swag f*ck*** long content</td> <td>qwe</td> <td>qwe</td> <td>qwe.</td> <td>qwe</td> </tr> </table> </div> </div> <div class="col-sm-12"> <div class="table-responsive"> <table class="table table-hover table-bordered"> <thead> <tr> <td class="table-colspan" colspan="6">later on</td> </tr> </thead> <tr class="title-tr"> <td>yolo</td> <td>2</td> <td>x</td> <td>x</td> <td>5</td> <td>x</td> </tr> <tr> <td>qwe</td> <td>qwe</td> <td>qwe</td> <td>qwe</td> <td>this one will be yolo too</td> <td>qwe</td> </tr> </table> </div> </div> </div> ``` how to parameter those tables to have a common column width without breaking the bootstrap webresponsive? Or shall I just delete table and create div with col-lg-x to be sure they will be align? Edit for understanding purpose I would like the column 2 and 5 be the same width on both table. without breaking the responsive aspect of the table (and, if possile, without defining a specific width for those column) The "kind" of algorithme I'm looking for is: ``` foreach (column in table 1 and table2){ var maxwidth = Max(width column table1, width column table2) apply maxwidth to column table1, column table2 } ``` I start to realise that I would be very surprise if those kind of algorithme exist in basic CSS

Original source