Forcing column breaks in CSS3 multi-column, when using html tables

Question

I have multi-column layouts working, and now want to have it working with an html table (see http://lucas.ucs.ed.ac.uk/tutorials/CSS3_columns/) however there is just one wee flaw: where the table is cut for the next column, the cut can be mid-row... and it looks horrible.

When I had a page that was just a series of <p> elements, I used a simple style="display: inline-block;" trick to keep the contents of the paragraph together, forcing the column-breaks to be between paragraphs.

Unsurprisingly, this isn't working with tables.

I've tried putting the content of each <td> into a div, and applying the inline-block;" style; I've tried applying

{
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside: avoid;
  -moz-page-break-inside: avoid;
  page-break-inside: avoid; 
}

to <tr>s and to <td>s - with no joy.

Has anyone some suggestions for getting an HTML table to break into whole rows, when using CSS3 multi-columns

Torrien · Accepted Answer · 2014-02-10 06:26:00Z

As of today this standard isn't well implemented. I would suggest creating a pseudo table with div where the row div will avoid the break as a block element. Generating a div table is just as simple as making a table. However it probably is heavier on the browser.

Bellow I show a small example. I hope it works well. Is the only solution I could design.

<head>
<style>
.columns {
position : relative ;

column-width: 27em;
-moz-column-width: 27em;
-webkit-column-width: 27em;
column-rule: 2px solid red;
-webkit-column-rule: 2px solid red;
-moz-column-rule: 2px solid red;
column-gap: 12px;
-webkit-column-gap: 12px;
-moz-column-gap: 12px;

}

.testerRow {
    display : block ;
    height : 1em ;
    width : 100% ;
    margin : 0px ;
}



div.tl1, div.tl2, div.tl3 {
    display : block ;
    float : left ;
    width : 32.5%;
    height : 15px ;
    border : 2px solid red ;
    border-left : 0px solid red ;
    border-top : 0px solid red ;
}

div.tl1 {
    border : 2px solid red ;
    border-top : 0px ;
}

</style>
</hed>
<body>
<div class="columns">
    <div class="testerRow">
        <div class="tl1">test</div>
        <div class="tl2">test2</div>
        <div class="tl3">test3</div>
    </div>
    <div class="testerRow">
        <div class="tl1">test</div>
        <div class="tl2">test2</div>
        <div class="tl3">test3</div>
    </div>
    <div class="testerRow">
        <div class="tl1">test</div>
        <div class="tl2">test2</div>
        <div class="tl3">test3</div>
    </div>
    <div class="testerRow">
        <div class="tl1">test</div>
        <div class="tl2">test2</div>
        <div class="tl3">test3</div>
    </div>
    <div class="testerRow">
        <div class="tl1">test</div>
        <div class="tl2">test2</div>
        <div class="tl3">test3</div>
    </div>
    <div class="testerRow">
        <div class="tl1">test</div>
        <div class="tl2">test2</div>
        <div class="tl3">test3</div>
    </div>
    <div class="testerRow">
        <div class="tl1">test</div>
        <div class="tl2">test2</div>
        <div class="tl3">test3</div>
    </div>
    <div class="testerRow">
        <div class="tl1">test</div>
        <div class="tl2">test2</div>
        <div class="tl3">test3</div>
    </div>
</div>
</body>

Probably having the upper border and adding the lower border with css3 selectors as div children of the last .testerRow will be more efficient than using the lower border. Depends on your implementation. Good luck!

Collectives™ on Stack Overflow

Forcing column breaks in CSS3 multi-column, when using html tables

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related