css - 在 2 个不同的 Bootstrap 表上对齐列

Question

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

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

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