Last Comment Bug 549114 - Support Column Breaks part of CSS3 columns spec
: Support Column Breaks part of CSS3 columns spec
Status: NEW
: css3, dev-doc-needed, DevAdvocacy
Product: Core
Classification: Components
Component: Layout (show other bugs)
: Trunk
: All All
P2 enhancement with 57 votes (vote)
: ---
Assigned To: Nobody; OK to take it and work on it
: Jet Villegas (:jet)
: 649648 (view as bug list)
Depends on: 132035 775618 page-break-inside
Blocks: css3-multicol css3-break css3test
  Show dependency treegraph
Reported: 2010-02-27 09:46 PST by william
Modified: 2017-01-27 10:25 PST (History)
38 users (show)
See Also:
Crash Signature:
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---


Description User image william 2010-02-27 09:46:22 PST
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2) Gecko/20100115 Firefox/3.6 GTBDFff GTB7.0
Build Identifier: 

It doesn't appear that the column breaking part of the css3 spec is implemented:

I am building a webapp that doesn't need to work in IE, and the lack of support for break-inside: avoid-column; is causing problems.

Reproducible: Always
Comment 1 User image cobexer 2011-01-01 09:10:46 PST
This bug makes CSS3 multi-column layouts entirely useless for everything other than text. half implemented things don't help anybody!
Comment 2 User image richardigp 2011-04-03 08:44:03 PDT
The column flow also doesn't happen for tables. These should column break at rows across columns without additional tags. 

As above the use is for a webapp and XULRunner application. 

This could be addressed with colbreak inserted into the <tr>, but would probably be better if tables column flowed like text, as part of the standard flow.
Comment 3 User image Boris Zbarsky [:bz] (still a bit busy) 2011-04-26 12:43:18 PDT
*** Bug 649648 has been marked as a duplicate of this bug. ***
Comment 4 User image Ian Thomas ('thelem') 2011-07-29 04:10:07 PDT
richardigp's comment points to a workaround for some of this functionality until it is implemented:

<table><tr><td style="column-break-inside: avoid;">(non-breaking content here</td></tr></table>

Very definitely a hack, but should be forward-compatible unless a browser supports splitting table cells between columns without supporting column-break-inside.
Comment 5 User image Robert O'Callahan (:roc) (email my personal email if necessary) 2011-09-01 20:26:04 PDT
I think we should probably do this as part of bug 132035, or at least do bug 132035 first with this bug in mind.
Comment 6 User image David B. 2012-04-08 17:39:42 PDT

Also, instead of using:

<table><tr><td style="column-break-inside: avoid;">(non-breaking content here</td></tr></table>

Just use something like:

.column-fix {
        -webkit-column-break-inside: avoid;
	-moz-column-break-inside: avoid;
	-o-column-break-inside: avoid;
	column-break-inside: avoid;
	display: table;

Again, it's a hack, but it makes your HTML much cleaner.
Comment 7 User image richardigp 2012-04-09 09:28:28 PDT
It's probably bad manners to drill things but I am not sure this is part of bug 132035. The issue is tables in columns is a flow layout paradigm not a page issue (or am I wrong?). Therefore tables should flow across the columns to reflect the layout intention of the author. The real issue is should header rows repeat on columns but that is probably a little too "printy". 

This is of concern to me/us because our XULRunner based ePub3 reader AZARDI (listed in XULRunner hall of honor) cannot present tables effectively in a controlled viewport/columns based presentation. Webkit handles table flow OK, although it too has some serious column flow issues. It is great to work with the native flow-power of the rendering engine rather than work around it.
Comment 8 User image EB 2012-10-03 14:50:22 PDT
Please fix this ASAP. It is causing people not to use the multi column function. I am trying to use for a mega menu and while it looks great in Safari and Chrome, it fails miserably in FF.
Comment 9 User image Asbjørn Riis-Knudsen 2012-11-12 05:58:30 PST
This needs to be fixed ASAP. How can one even think of implementing CSS Columns without the ability to control breaks? Regrettably, this is becoming typical of Mozilla as of late - implementing things half-way and then leaving them there (this bug was filed in 2010!). Microsoft got it right in IE10 (and without prefixes!). Do you want me to switch back to IE?
Comment 10 User image Robert O'Callahan (:roc) (email my personal email if necessary) 2012-11-12 12:01:15 PST
page-break-inside:avoid just landed on nightly builds.
Comment 11 User image Oliver Kohll 2012-12-17 08:34:38 PST
Excellent, thanks. Will this CSS avoid an element being broken up by a column as well as by a page?
Comment 12 User image EB 2012-12-17 09:02:22 PST
Comment 13 User image EB 2012-12-17 09:03:20 PST
(In reply to EB from comment #12)
> Thanks!!!! I hope it works for columns as well as pages!!!
Comment 14 User image EB 2012-12-17 09:05:33 PST
(In reply to EB from comment #13)
> (In reply to EB from comment #12)
> > Thanks!!!! I hope it works for columns as well as pages!!!
Just tested and it doesn't appear to work for columns :(
Comment 15 User image Oliver Kohll 2013-04-22 10:53:30 PDT
It does now - FF v20.0 :-)
Comment 16 User image Florian Bender 2013-09-05 14:08:46 PDT
Bug 775618 will alias some existing page-break-* properties. Does this fix (part of) the initial problem?
Comment 17 User image Florian Bender 2014-02-01 12:25:27 PST
Scott, still working on this?
Comment 18 User image Scott Johnson (:jwir3) 2014-02-03 07:33:42 PST
(In reply to Florian Bender from comment #17)
> Scott, still working on this?

Nope, I'm not working on this at the moment. Feel free to take it if you want. :)
Comment 19 User image Michal 2014-10-30 02:07:13 PDT
Temporary workaround is to add 'display:table' on element with 'page-break-inside' or just wrap it with table.
Comment 20 User image Sylvain Pollet-Villard 2014-12-05 01:09:50 PST
CSS multi-columns implementation is a mess between browsers. I came to this :

.column-fix {
	break-inside: avoid-column;
	-webkit-column-break-inside: avoid;
	-moz-column-break-inside: avoid;
	-o-column-break-inside: avoid;
	column-break-inside: avoid;
	page-break-inside: avoid;
	display: table;

But display:table workaround causes issues on other browsers where break-* properties are well supported. So I have to specifically load a stylesheet for Firefox. This puts FF on the same level as IE from a web developer perspective :'(
Comment 21 User image mel 2015-08-18 04:14:44 PDT
FWIW, to completely prevent column breaks in Firefox, I've found that using the combination:

    display: inline-block;
    width: 100%;

seems to work better as a workaround than `display: table`, which more often interferes with other styles (eg. padding).

Note You need to log in before you can comment on or make changes to this bug.