Forum How do I...?

Table spanning 2 columns in 2 column layout

neeraavi
I am trying to create a 2 column pdf of the wikipedia article http://en.wikipedia.org/wiki/Evolutionary_history_of_life.

I am using the following command.
prince --no-author-style -s http://www.princexml.com/howcome/2008/wikipedia/wiki2.css http://en.wikipedia.org/wiki/Evolutionary_history_of_life -o a.pdf

Problem is that the table in the article is not fitting in one column and overlaps with the text on the second column making it unreadable.

So, I would like to have just the tables spread over both the 2-columns.
I really cannot figure out what is the be changed in the css file to get this correctly done.

This is what I wold like to achive finally !

----text--- ----text----
----text--- ----text----
----text--- ----text----
---------table-----------
---------table-----------
---------table-----------
----text--- ----text----
----text--- ----text----
jim_albright
Have you tried

columns: 1 ;

in CSS for table?

Jim Albright
Wycliffe Bible Translators

neeraavi
Unfortunately that does not work.

I downloaded the css from http://www.princexml.com/howcome/2008/wikipedia/wiki2.css
I added the following to the end of the file and saved it locally as a.css

table {columns: 1 ;}

Generated a.pdf using following command
prince --no-author-style -s a.css http://en.wikipedia.org/wiki/Evolutionary_history_of_life -o a.pdf

Still tables span one column (and overflow into the next)
Example: on page 13.
The table in wikipedia is coded like this...

<table cellspacing="0" cellpadding="0" border="0" style="">
<tr>
....
<p>Early synapsids (extinct)</p>
...
howcome
Prince does not support the 'column-span' property, so you can't have tables that span multiple column. Unless you float them to the top or bottom. Here's a style sheet that does this for the tables in your article:

http://www.princexml.com/howcome/2010/wikipedia/wiki2-table-detect.css

Note this code at the bottom:

div[style="width:40%; border:solid 1px silver; padding:2px; margin:2px; float:right;"], div[style="border:solid 1px silver; padding:2px; margin:2px; float:right;"], div[style="width:auto; border:solid 1px silver; padding:2px; margin:2px;"], table[style="text-align:center; width:97%; margin-right:10px; font-size:90%"]
{ float: bottom }

This is very fragile code which will fail when the content of the style attribute changes. However, it's the only way to select the tables in question. If the div/table elements had class names, the selectors would be much simpler and more reliable. Wikipedia's use of style attributes instead of class names is a source of much frustration for me:

http://www.princexml.com/howcome/2009/wikipedia/

Please help me improve Wikipedia's markup if you can

-h&kon
bookdev
Håkon, would it be possible to add to the CSS Multi-column Layout Module a way to display wide tables? For example, allow a table in the left column to expand into the right column or a table in the right column to expand into the left column with the text in those columns wrapping around the table. This could work similar to float:left and float:right but across columns. Otherwise, the tables make a mess of the layout. You could use the same feature for photos and other wide elements.

I tried your table {float:bottom} suggestion in Prince but that floats the table into a different article (I have multiple xinclude articles per page) and sometimes even onto a different page so that the table no longer makes any sense.