All geek questions in one place

Forced column breaks in CSS3 with multiple columns when using html tables

I have multi-column layouts and now I want it to work with the html table (see http://lucas.ucs.ed.ac.uk/tutorials/CSS3_columns/ ), however there is just one of the drawbacks: where is the table cut out for of the next column, the cut may be in the middle of the row ... and it looks awful.

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

No wonder this doesn't work with tables.

I tried putting the contents of each <td> in a div and applying the inline-block;" style inline-block;" ; I tried applying

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

before <tr> s and <td> s - without joy.

Does anyone have suggestions for breaking an HTML table into whole rows when using CSS3 multi-columns

+4
source share
1 answer

To date, this standard is not very well implemented. I would suggest creating a pseudo-table with a div where the row div will avoid interruption as a block element. Creating a div table is as simple as creating a table. However, it is probably heavier in the browser.

A small example is shown below. Hope this works well. This is the only solution I could develop.

 <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 with an upper bound and adding a lower bound with css3 selectors, since div children of the last .testerRow will be more efficient than using a lower bound. Depends on your implementation. Good luck

+1
source

Source: https://habr.com/ru/post/1500282/

More articles:


All Articles