14

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).

Improve this question
2
  • 3
    I think that kind of defies the "definition" of a table. If it was a fluid element, it wouldn't be a table, and the contrary, if it's a table it's not fluid. Although you might be able to hack this out with strange positioning...
    – davin
    Commented Jun 7, 2011 at 1:06
  • I thought this much, but since I'm no expert at HTML/CSS I decided to ask... :(
    – Luiz Borges
    Commented Jun 7, 2011 at 1:08

1 Answer 1

Reset to default
5

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/

Improve this answer
3
  • It seems to work, but not in IE, and just with the -webkit variant in Chrome. This won't be much of a problem since I will be using Prince XML. Also, I noticed that cell might break between columns, is there a way to avoid that?
    – Luiz Borges
    Commented Jun 7, 2011 at 1:23
  • As far as I know, no there isn't a way.
    – eagle12
    Commented Jun 7, 2011 at 1:42
  • works as of IE 10 with -ms-column-count. As for cell breaking... that's difficult and inconsistent, or at least I have yet to find a consistent way to do it. You can make an individual cell not break by setting display: inline-block, or wrapping its content in a div with that style, but the whole row will not cooperate like that. Some content will work fine, other content will be quirky, frequently with an indent on the second column. There are also the column-break properties, but support is spotty I have yet to get them to work well with an entire row in a table.
    – Randolpho
    Commented Jul 1, 2014 at 17:50

Not the answer you're looking for? Browse other questions tagged or ask your own question.