CODEWITHSUNDEEP
csshtmltwitter-bootstraptwitter-bootstrap-3
ssbb
ssbb

Reputation: 1931

align column on 2 different bootstrap table

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

Upvotes: 4

Views: 4711

Answers (2)

Miquel Al. Vicens
Miquel Al. Vicens

Reputation: 376

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.

Upvotes: 5

Eren Akkus
Eren Akkus

Reputation: 471

you can do it with;

.table{table-layout:fixed;}

check this fiddle: https://jsfiddle.net/5qn79j4f/3/

Upvotes: 4

Related Questions