在两个不同的引导表上对齐列

Question

我有两个引导表垂直显示。它们包含相同的标题头，但单元格上的内容长度是可变的。

最终结果看起来很悲哀，我想让那些表列对齐"as“，这是一个非常大的表，允许用户轻松地阅读它(例如这里)：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>

如何将这些表参数设置为具有公共列宽度而不破坏引导程序的the响应？还是我只是删除表并创建div与col，以确保它们是对齐的？

为理解目的而编辑

我希望第2栏和第5栏在两张桌子上的宽度相同。而不破坏表的响应方面(如果存在，则不为这些列定义特定的宽度)。

我要找的那种算法是：

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

此外，还可以使用典型的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/