Question

我正在尝试使用相同大小的列来使两个表看起来彼此相似。到目前为止，我已尝试给他们一个固定大小，在引导媒体查询上发生了变化，但这并没有那么好。

我还尝试使用cols，由于某种原因没有给它们相同的列大小。

这是一张显示我希望他们看起来如何的图片：

HTML标记：

<div class="container-fluid services animated fadeIn">
<table class="table services">
    <thead>
        <tr>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>
</div>

以下是JSFiddle

上的完整代码和示例

Answer 1

为第二个表添加空th和td，并使用表的table-layout:fixed css属性，我们可以实现所需的输出。

检查fiddle

Answer 2

我建议准备两个具有相同列数的表（在这种情况下为7，其中6用于数据，最后一个用于保存操作）。一个表行看起来像这样（对于另一个表，所有其他单元格都为空）：

<tr>
  <td><a href="#">Klipning</a></td>
  <td>35 minutter</td>
  <td>10 minutter</td>
  <td>Ingen</td>
  <td>389,- kr.</td>
  <td>En lækker klipning med alt...</td>
  <td>
    <span class="pull-right">
      <i class="fa fa-pencil-square-o"></i>
      <i class="fa fa-times-circle-o"></i>
    </span>
  </td>
</tr>

我已将这些操作放在一个单元格和一个单独的跨度中以将它们拉到右侧。

然后通过自定义css应用具体单元格宽度（总计最多100％）：

.services td {
  width: 12%;
}

.services td:nth-child(6){
  width:30%;
}

.services td:nth-child(7){
  width:10%;
}

请参阅http://www.bootply.com/1yK3jiZUkL上的完整示例。

为分隔的连续表应用相同的表列宽

2 个答案: