Question

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

最终的结果看起来非常难过，我想让那些表格列对齐＆＃34; as＆＃34;这是一个非常大的表，允许用户轻松阅读（例如这里）： 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列在两个表上的宽度相同。不破坏表的响应方面（如果可能的话，没有为这些列定义特定的宽度）

＆＃34; kind＆＃34;我正在寻找的算法是：

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

你可以用;

.table{table-layout:fixed;}

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

Answer 2

除了Eren Akkus的命题之外，您还可以使用典型的col-*类来指定每列中的宽度。这样：

＆＃13;

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

＆＃13;

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

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

2 个答案: