开发者

Split a table in half

开发者 https://www.devze.com 2023-03-10 16:47 出处:网络
Is there anyway to split a table in half using CSS and display the two parts side-by-side. For example, take this:

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 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/

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号