Question

我正在做的是使用hr作为单独的表格单元格来分割内容。

以下是它应该看起来的样子（没有hr单元格）， JSFiddle Correct （例如只有一个部分）

但是，当我添加hr分隔符单元格时，它会破坏所有内容。的 JSFiddle Incorrect

所以大局就是这样......

<table>

<tr>
   //th's with content
</tr>

<tr><th class="col-xs-12"><hr class="square" /></th></tr>

<tr>
   //th's with content
</tr>

<tr><th class="col-xs-12"><hr class="square" /></th></tr>

</table>

只需要帮助正确设置样式/ css'ing hr单元格。

Answer 1

这是你想要的吗？ http://jsfiddle.net/4Akrp/5/

我刚添加了colspan =＆＃34; 3＆＃34;

<table>

<tr>
   //th's with content
</tr>

<tr><th class="col-xs-12" colspan="3"><hr class="square" /></th></tr>

<tr>
   //th's with content
</tr>

<tr><th class="col-xs-12" colspan="3"><hr class="square" /></th></tr>

</table>

Answer 2

在最后一行（<tr>），您可以添加：<tr><th class="col-xs-12" colspan="3"><hr class="square" /></th></tr>

在Bootstrap中，col-*类可以帮助您在容器中放置空间 - 在本例中为表标题<th>（但它应该是表格单元格<td>）。

你想要做的是扩展hr以获取页面的宽度（我假设），这样你就可以使<th>跨越几列（尽可能多的列）表格），或者您可以简单地将<hr>标记放在表格之外（就像关闭</table>代码后

一样

Answer 3

我有同样的问题，我问过，我收到了这个 - 你应该防止把它放在行外或列内 -row有负余量，我想你不希望hr在每一方都伸出15px。

引导程序中的HR标记问题

3 个答案: