Menu
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
679
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!
138
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
