将桌子分成两半 [英] Split a table in half

查看:267
本文介绍了将桌子分成两半的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

还有,使用CSS将表分成两半,并显示两个部分。

Is there anyway to split a table in half using CSS and display the two parts side-by-side.

例如:

| row1 | row1 | row1 |
| row2 | row2 | row2 |
| row3 | row3 | row3 |
| row4 | row4 | row4 |
| row5 | row5 | row5 |

并执行以下操作:

| row1 | row1 | row1 |    | row4 | row4 | row4 |
| row2 | row2 | row2 |    | row5 | row5 | row5 |
| row3 | row3 | row3 |

我可以更改HTML标记(例如用自定义类标记break行),但是我必须能够决定表是否会通过CSS拆分。

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.

我知道我可以使用2个表,并使用 display: inline-table ,但我必须使用一个表,因为我需要一致的列宽度(表必须有自动布局)。

I know that I could use 2 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).

推荐答案

可以使用多列,但它是一个CSS3属性。例如:

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

您也可以尝试此方法

http://www.csscripting.com/css-multi-column/

这篇关于将桌子分成两半的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆