2つの異なるブートストラップテーブルに列を整列

Question

私は垂直に2つのブートストラップテーブルの表示を持っています。 これらは同じタイトルヘッドを含みますが、セル上のコンテンツの長さは可変です。 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> 

：それは、ユーザーがそれeasely（ここexemple）を読み取ることができるように非常に大きなテーブル、だった「として」

最終的な結果は非常に悲しい見て、私はそれらのテーブルの列整列を持っていると思います

ブートストラップwebresponsiveを壊さずに共通の列幅を持つようにこれらのテーブルをどのようにパラメータ設定するのですか？ また、テーブルを削除して、col-lg-xを使ってdivを作成して整列させるだけでいいですか？

編集目的

を理解するため、私は、カラム2と5両方のテーブルの上に同じ幅であることをしたいと思います。テーブルの応答性の側面（および、possile場合、それらの列の特定の幅を定義せずに）

私が探しているalgorithmeの「種類」を壊すことなく、次のとおりです。私はに開始

foreach (column in table 1 and table2){ 
    var maxwidth = Max(width column table1, width column table2) 
    apply maxwidth to column table1, column table2 
} 

そのような種類のアルゴリズムが基本的なCSSに存在するなら、私は非常に驚くはずであることに気づくでしょう。

Answer 1

エレンAkkusの命題に追加するには、ほかに、あなたは典型的なcol-*クラスを使用して、各列に幅を指定することができます。このように：

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

この特別な機構は、公式ドキュメントに示されているが、フレームワークは、そのための準備ができていません。

Answer 2

あなたはそれを行うことができます。

.table{table-layout:fixed;} 

チェックこのフィドル：https://jsfiddle.net/5qn79j4f/3/