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

Question

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

最终结果看起来很可悲，我想让那些表格列对齐“因为”它是一个非常大的表格，让用户可以轻松阅读（例如这里）：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>

如何在不破坏 bootstrap webresponsive 的情况下将这些表参数化为具有共同的列宽？或者我应该删除表格并使用 col-lg-x 创建 div 以确保它们对齐？

出于理解目的编辑

我希望第 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

除了 Eren 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>

这种特殊的机制在官方文档中没有说明，但是框架已经准备好了。