How To Prevent A Column Break Between A Heading And The First Row Of A Table?

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 ge

Solution 1:

Try this one

---

CSS:

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

Solution 2:

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

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

Fiddle ^

Solution 3:

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

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

Solution 4:

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:

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

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

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

Solution 5:

Place every table and related heading in a div. Here is an example.