html - 当其中有不同的列数时，如何制作 Bootstrap 3 样式表来填充其行？

Question

我基本上有一个表恰好有这些行:

<tr>
    <td>H</td>
</tr>
<tr>
    <td>E</td>
    <td>L</td>
    <td>L</td>
    <td>O</td>
    <td>!</td>
</tr>

所以我在每一行中添加了一些视觉类，如 .primary 或 .info 甚至得到了 .table-hover 表格看起来有点奇怪。

在上面的例子中，最后一行有两列，第一行只有一列。我应该怎么做才能使较小的表格行沿整个表格宽度展开？

这是用于在示例中生成相同表格的 html 呈现 (Jade):

.table-responsive
table.table.table-bordered.table-hover(style='max-width: none;')
    tbody                                                       
        tr(ng-show='beenEvaluated')
            th(colspan='4') Token re2
            th(colspan='4') Lexema
        tr(ng-repeat='(tokenRe2,lex) in re2Captures' ng-init='re2s = lex').info
            td(colspan='4') {{tokenRe2}}
            td(ng-repeat= 'i in lex track by $index' style='border:none;' colspan='4')
                li {{i}}

可以看出，我尝试使用 colspan 但没有得到结果...

Answer 1

您正在寻找 colspan <td> 上的属性标签。

<td colspan="2">H</td>

这将使 <td>两列长。这可以应用于 <th>标签也是如此，因此请相应地使用。

希望对您有所帮助!

See this Bootply example

colspan 的工作原理:

+----+----+----+
|    |    |    |
+----+----+----+----+
|    |    |    |    |
+----+----+----+----+

这是一个具有以下结构的表:

<tr>
  <th></th>
  <th></th>
  <th></th>
</tr>
<tr>
  <td></td>
  <td></td>
  <td></td>
  <td></td>

为了使表格均匀，我们要添加一个额外的 colspan最后<th>第一行:

<tr>
  <th></th>
  <th></th>
  <th colspan="2"></th>
</tr>

所以表格看起来像这样:

+----+----+----+----+
|    |    |         |
+----+----+----+----+
|    |    |    |    |
+----+----+----+----+

长话短说:博士 colspan根据表中的其他行填充空间。相应地使用。