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

Question

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

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

如何在不破坏引导网络响应的情况下对这些表进行参数化以具有共同的列宽？ 还是我应该删除表格并使用 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>

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

Answer 2

你可以做到；

.table{table-layout:fixed;}

检查这个小提琴：https://jsfiddle.net/5qn79j4f/3/