Is there anyway to split a table in half using CSS and display the two parts side-by-side.
For example, take this:
| row1 | row1 | row1 |
| row2 | row2 | row2 |
| row3 | row3 | row3 |
| row4 | row4 | row4 |
| row5 | row5 | row5 |
And make this:
| row1 | row1 | row1 | | row4 | row4 | row4 |
| row2 | row2 | row2 | | row5 | row5 | row5 |
| row3 | row3 | row3 |
I can change the HTML markup (like marking the "breaking" row with a custom class), but I have to be able decide if the table would be split or not via CSS.
I know that I could use two tables and use display:inline-table
, but I must use just one table because of I need consistent column width (the table must have auto layout).
You can also use an easy shortcut key to split a table into multiple tables, please put the cursor at the cell where you want to split from, and then press Ctrl+ Shift+ Enter keys together to split the table into two parts.
you can use multi column, but it is a CSS3 property. eg:
-moz-column-count: 2;
-moz-column-gap: 20px;
-webkit-column-count: 2;
-webkit-column-gap: 20px;
column-count: 2;
column-gap: 20px;
This should work in the modern browsers
You can also try this method
http://www.csscripting.com/css-multi-column/
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