Question

我正在尝试创建包含带标题的多个表的响应列。我想防止标题位于列的底部。这听起来很简单，但我无法让它发挥作用。

我广泛使用了搜索，阅读并尝试了人们在Stackoverflow上建议的内容，但没有成功。 （另外：我正在使用一个创建列的javascript，它包含应该有用的js类，但它们也不起作用。给dev开发电子邮件，但他无法修复它们。）

我也试过使用break-before，break-after，break-inside CSS属性，但在我的情况下它们似乎没有做任何事情。

如果有人能指出正确的方向或告诉我问题可能在哪里，我将非常感激。

简而言之： 永远不要在h2标题和第一个表格行之间打破：

<h2>Heading</h2>
<table class="table table-hover" >  
<tr><td>Title Here</td><td class="vert-align">Description</td></tr>
<tr><td>Title Here</td><td class="vert-align">Description</td></tr>
</table>

小提琴尝试： http://jsfiddle.net/xjrt8qrm/

Answer 1

试试这个

CSS：

.table
{
    position:relative;
    top:-20px;
}

Answer 2

$("h2").each(function() {
    var elem = $(this).next().find("tr").first().find("td");
    elem.css("border-top", "none");
});

http://jsfiddle.net/xjrt8qrm/2/

小提琴^

Answer 3

.mytable table
 {
  -webkit-column-break-inside:avoid;
   -moz-column-break-inside:avoid;
   column-break-inside:avoid;
 } 

.mytable h2
{
 -webkit-column-break-before:always;
 -moz-column-break-before:always;
  column-break-before:always;
 }

Answer 4

我认为你的意思是，你希望h2和表在列化时不会分裂。我假设您正在使用Wulf列表器，因为它是您在小提琴中使用的。如果是这种情况，那么你应该将h2和表包装到一个容器中并添加类＆＃34; dontsplit＆＃34;防止切断该部分。

使用您的代码的示例：

<div class="dontsplit">
<h2>Heading</h2>
<table class="table table-hover">
<tr><td>Title Here</td><td class="vert-align">Description</td></tr>
<tr><td>Title Here</td><td class="vert-align">Description</td></tr>
</table>
</div>

要防止h2放在列的末尾，请使用＆＃34; dontend＆＃34;类。

<h2 class="dontend">Heading</h2>
<table class="table table-hover">
<tr><td>Title Here</td><td class="vert-align">Description</td></tr>
<tr><td>Title Here</td><td class="vert-align">Description</td></tr>
</table>

Answer 5

将每个表格和相关标题放在div中。 Here就是一个例子。

如何防止标题和表的第一行之间的列中断？

5 个答案: