如何防止标题和表格第一行之间出现分栏? [英] How to prevent a column break between a heading and the first row of a table?

问题描述

我正在尝试创建包含多个带有标题的表格的响应式列.我想防止标题位于列的底部.听起来很简单，但我无法让它工作.

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

我还尝试使用 break-before、break-after、break-inside CSS 属性，但在我的情况下，它们似乎没有任何作用.

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

简而言之:永远不要在 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>

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

解决方案

我想你的意思是，你希望 h2 和表在被列化时不分裂.我假设您正在使用 Wulf 列化器，因为它是您在小提琴中使用的.如果是这种情况，那么您应该将 h2 和表包装到一个容器中，并添加类dontsplit"以防止在该部分上进行切割.

使用您的代码的示例:

<h2>标题</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>

要防止 h2 放在列的末尾，请使用dontend"类.

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

I'm trying to create responsive columns that include several tables with headings. I want to prevent that a heading is at the bottom of the column. It sounds simple, but I can't get it to work.

I used the search extensively, read and tried the things that people suggested on Stackoverflow, but had no success. (Plus: I'm using a javascript that creates the columns and it includes js classes that should be useful, but they don't work either. eMailed the dev, but he couldn't fix them.)

I've also tried to use the break-before, break-after, break-inside CSS properties, but they don't seem to do anything in my case.

Would be extremely grateful if someone could point me to the right direction or tell me where the problem might be.

In short: Never break between the h2 Heading and the first table row:

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

Fiddle to try out: http://jsfiddle.net/xjrt8qrm/

解决方案

I think what you mean is, you want the h2 and the table to not split when it gets columnized. I'll assume you're using the Wulf columnizer as it is what you were using in fiddle. If that's the case, then you should wrap the h2 and the table into a container and add the class "dontsplit" to prevent chopping on that section.

Example using your code:

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

To prevent the h2 to be placed at the end of the column, use "dontend" class.

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

这篇关于如何防止标题和表格第一行之间出现分栏?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！